52. CSS3 animation-direction属性设置动画播放方向
animation-direction
属性主要用来设置动画播放方向。
语法规则:
animation-direction:normal | alternate [, normal | alternate]*
其主要有两个值:normal、alternate
normal
:是默认值,如果设置为 normal 时,动画的每次循环都是向前播放;alternate
:作用是,动画播放在第偶数次向前播放,第奇数次向反方向播放。
例如:通过animation-direction
属性,将 move 动画播放动画方向设置为alternate
,代码为:
animation-direction:alternate;
注意:Chrome 或 Safari 浏览器,需要加入-webkit-
前缀!
实例演示
将动画 move 播放方向设置为 alternate。
HTML 代码:
<div><span></span></div>
CSS 代码:
@keyframes move { 0%{ transform: translateY(90px); } 15%{ transform: translate(90px,90px); } 30%{ transform: translate(180px,90px); } 45%{ transform: translate(90px,90px); } 60%{ transform: translate(90px,0); } 75%{ transform: translate(90px,90px); } 90%{ transform: translate(90px,180px); } 100%{ transform: translate(90px,90px); } } div { width: 200px; height: 200px; border: 1px solid red; margin: 20px auto; } span { display: inline-block; width: 20px; height: 20px; background: orange; transform: translateY(90px); animation-name: move; animation-duration: 10s; animation-timing-function: ease-in; animation-delay: .2s; animation-iteration-count:infinite; animation-direction:alternate; }
效果如下:
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 52. CSS3 animation-direction属性设置动画播放方向
码云笔记 » 52. CSS3 animation-direction属性设置动画播放方向