animation-direction
版本： CSS3
animation-direction
CSS 属性指示动画是否反向播放，它通常在简写属性
animation
中设定。
示例
animation-direction: normal; animation-direction: reverse; animation-direction: alternate; animation-direction: alternate-reverse; animation-direction: normal, reverse; animation-direction: alternate, reverse, normal;
浏览器支持
|
|
|
|
|
IE10以上版本的浏览器都支持
animation-direction
|
||||
语法
animation-direction :normal | reverse | alternate | alternate-reverse
取值
- normal ：每个循环内动画向前循环，换言之，每个动画循环结束，动画重置到起点重新开始，这是默认属性。
- alternate ：动画交替反向运行，反向运行时，动画按步后退，同时带时间功能的函数也反向，比如，ease-in 在反向时成为ease-out。计数取决于开始时是奇数迭代还是偶数迭代
- reverse ：反向运行动画，每周期结束动画由尾到头运行。
- alternate-reverse ：反向交替，反向开始交替动画第一次运行时是反向的，然后下一次是正向，后面依次循环。决定奇数次或偶数次的计数从1开始。
| 默认值 | normal |
| 适用于 |
所有元素，包含伪对象
::before
and
::after
|
| 继承性 | 无 |
| 动画性 | 否 |
| 计算值 | 指定值 |
| 媒体 | 视觉< |
实例
<style type="text/css">
div{
width:100px;
height:100px;
position:relative;
background-color:hsl(120,65%,75%);
animation:demo 5s alternate infinite;
/*safari和chrome*/
-webkit-animation:demo 5s infinite;
animation-direction:alternate;
/*safari和chrome*/
-webkit-animation-direction:alternate;
}
@keyframes demo
{
from{left:0px;}
to{left:450px;}
}
/*safari和chrome*/
@-webkit-keyframes demo
{
from{left:0px;}
to{left:450px;}
}
</style>
</head>
<body>
<div></div>
</body>
效果图：
