CSS animation-direction属性
animation-direction属性
CSS中的animation-direction属性，可以定义@keyframes定义的动画是否需要轮流方向播放。
语法
animationo-direction:value
可选属性值
| 属性值 | 描述 |
|---|---|
| normal | 默认值，动画正常播放 |
| alternate | 动画轮流方向播放 |
提示：alternate属性值会在动画播放的奇数次数正常播放，然后在偶数次数向后播放。
animation-direction实例代码，及在线编辑器
<div id='d1'></div>
<style>
@keyframes animationDirection{
0% {background-color:skyblue; left:0px; top:0px;}
25% {background-color:blue; left:250px; top:0px;}
50% {background-color:orange; left:250px; top:250px;}
75% {background-color:yellow; left:0px; top:250px;}
100% {background-color:pink; left:0px; top:0px;}
}
#d1{
width:80px;
height:80px;
background-color:skyblue;
position:relative;
animation:animationDirection 6s infinite;
animation-direction:alternate;
}
</style>