动画反复运行时,使用animation-direction属性指定动画是否反向播放。
当动画只运行一次时，指定该属性将不会出现效果。
.close { cursor: pointer display: inline-block width: 100px height: 100px border-radius: 50% background-color: #96CEB4 position: relative }i { color: #FFEEAD font-size: 48px position: absolute top: 8% left: 19% }
/*定义动画*/
@-webkit-keyframes spin { /*兼容性写法。spin是关键帧的动画名称*/
from { /*动画起始状态*/
-webkit-transform: rotate(0deg) }
to { /*动画结束状态*/
-webkit-transform: rotate(360deg) }
} @keyframes spin { from { transform: rotate(0deg) }
to { transform: rotate(360deg) }
} .close:hover i { -webkit-animation: spin 1s linear infinite/*鼠标hover时，i图标旋转,infinite表示动画无限循环*/
animation: spin 1s linear infinite
}123456789101112131415161718192021222324252627282930313233343536373839
解析：
keyframes：定义一个名为spin的关键帧动画。
from：指定动画的起始状态
to：指定动画的结束状态。
linear：动画匀速运动
infinite：表示动画无限循环
如果想让动画执行2次：
.close:hover i { -webkit-animation: spin 1s linear 2/*2代表动画执行2次*/
animation: spin 1s linear 2
}1234
如果想让两次动画之间有延迟（比如一次动画结束，停留2秒再次执行动画，并且执行2次）：
.close:hover i { -webkit-animation: spin 1s linear 2s 2 /*2s代表延迟2秒 2代表动画执行2次*/
animation: spin 1s linear 2s 2
}1234
还可以反向旋转（alternate表示偶数次数反向播放动画，如下代码是顺时针旋转一次后，再逆时针旋转一次）：
.close:hover i { -webkit-animation: spin 1s linear 2s 2 alternate /*2s代表延迟2秒 2代表动画执行2次*/
animation: spin 1s linear 2s 2 alternate
}1234
过渡是一种动画，是从一种状态过渡到另一种状态，在过渡前，浏览器会计算页面的新页面结构以及完成重绘，过渡会自动双向运行，因此只要状态一反转，反向动画就会被运行。如果我们不希望所有的元素属性受到影响，只希望作用到 box-shadow, transform ，那么可以改写为：
在指定带前缀的属性时， transition-property 本身也需要加上前缀。比如： transition: transform.25s 针对旧的版本，也就是WebKit浏览器，需要写成 -webkit-transition: -webkit-transform .25s ，即属性和作为值的属性均需要加上前缀，否则在旧版本的浏览器不起作用。
<div id="ttee">现向左，后向右移动100px</div><script>
$("#ttee").animate({"left":100px},2000).animate({"left":-100px},1000)
</script>
