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; }
效果如下: