CSS3 animation-direction 属性 | CSS3教程：CSS3动画

定义和用法

animation-direction 属性定义是否循环交替反向播放动画。

注意：如果动画被设置为只播放一次，该属性将不起作用。

默认值：	normal
继承：	否
可动画化：	否。
版本：	CSS3
JavaScript 语法：	object.style.animationDirection=”reverse”

CSS 语法

animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;

属性值

值	描述
normal	默认值。动画按正常播放。
reverse	动画反向播放。
alternate	动画在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放。
alternate-reverse	动画在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放。
initial	设置该属性为它的默认值。
inherit	从父元素继承该属性。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性	谷歌	IE	火狐	苹果	opera
animation-direction	43.0 4.0 -webkit-	10.0	16.0 5.0 -moz-	9.0 4.0 -webkit-	30.0 15.0 -webkit- 12.0 -o-

实例

先执行一遍动画，然后再反向执行一遍动画：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Web176教程网(web176.com)</title> 
<style> 
div
{
 width:100px;
 height:100px;
 background:red;
 position:relative;
 animation:myfirst 5s infinite;
 animation-direction:alternate;

 /* Safari 和 Chrome */ -webkit-animation:myfirst 5s infinite;
 -webkit-animation-direction:alternate;
}

@keyframes myfirst
{
 0%   {background:red; left:0px; top:0px;}
 25%  {background:yellow; left:200px; top:0px;}
 50%  {background:blue; left:200px; top:200px;}
 75%  {background:green; left:0px; top:200px;}
 100% {background:red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */{
 0%   {background:red; left:0px; top:0px;}
 25%  {background:yellow; left:200px; top:0px;}
 50%  {background:blue; left:200px; top:200px;}
 75%  {background:green; left:0px; top:200px;}
 100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<p><strong>注意：</strong>Internet Explorer 9 及其之前的版本不支持 animation-direction 属性。</p>

<div></div>

</body>
</html>

terry

这个人很懒，什么都没有留下～