动画反复运行时,使用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
n. 时期；跨度；间距
vt. 延续；横跨；贯穿；遍及；弥补
span，英 [spæn]，美 [spæn]
动词spin的过去式形式
过去式: spanned 过去分词: spanned 现在分词: spanning 第三人称单数: spans
例句：He has settled here for a long span of time.
他已经在这儿定居很长一段时间了。
扩展资料：
spin，英 [spɪn]，美 [spɪn]
v. (使)旋转；疾驰；纺织；结网；眩晕
n. 纺织；旋转；眩晕；疾驰
过去式: spun/span 过去分词: spun 现在分词: spinning 第三人称单数: spins
spin用作名词的意思是“旋转”，转化为动词作“使…旋转”解，指人或物围绕着自身轴心或外部某一点快速转动，可用作不及物动词，也可用作及物动词。用作及物动词时接名词或代词作宾语。
