animation-direction
animation-direction规定动画是否在下一周期逆向地播放。默认是 “normal”。
语法
animation-direction: normal animation-direction: reverse animation-direction: alternate animation-direction: alternate-reverse animation-direction: normal, reverse animation-direction: alternate, reverse, normal
值
| 值 | 描述 |
|---|---|
| normal | 每个循环内动画向前循环，换言之，每个动画循环结束，动画重置到起点重新开始，这是默认属性。 |
| reverse | 反向运行动画，每周期结束动画由尾到头运行。 |
| alternate | 动画交替反向运行，反向运行时，动画按步后退，同时，带时间功能的函数也反向，比如，ease-in 在反向时成为ease-out。计数取决于开始时是奇数迭代还是偶数迭代 |
| alternate-reverse | 动画第一次运行时是反向的，然后下一次是正向，后面依次循环。决定奇数次或偶数次的计数从1开始。 |
例子
HTML
<div class="stage"> <figure class="ball"></figure> </div>
CSS
@keyframes 'slide' {
from {
left: 0;
top: 0;
}
50% {
left: 244px;
top: 100px;
}
to {
left: 488px;
top: 0;
}
}
.stage {
background: #ccc;
border-radius: 6px;
height: 150px;
position: relative;
min-width: 508px;
}
.stage .ball {
animation-name: slide;
animation-duration:ion: 2s;
animation-timing-function: ease-in-out;
animation-delay: .5s;
animation-iteration-count: infinite;
animation-direction: alternate;//反向运行动画，每周期结束动画由尾到头运行。
}
.ball {
background: red;
border-radius: 50%;
height: 40px;
position: absolute;
width: 40px;
}
执行结果