animation-direction

版本：CSS3

animation-directionCSS 属性指示动画是否反向播放，它通常在简写属性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>

效果图：