动画反复运行时,使用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
U: USp, Upright Spin 直立旋转L: LSp, Layback Spin 躬身旋转
C: CSp, Camel Spin 燕式旋转
S: SSp, Sit Spin 蹲转
前面加F: Flying 表示跳接
前面加C: Change Foot 表示换脚
跳接和换脚被认为增加的难度相同
Co: CoSp, Spin combination with change of position and no change of foot 换姿势不换脚的联合旋转
CCo: CCoSp, Spin combination with change of position and change of foot 换姿势换脚的联合旋转
后面的数字表示定级 所以FUSp3就是表示跳接直立转 定级是3级 CCoSp4代表定级为四级的换姿势换足的联合旋转
同理SlSt: Straight Line Step Sequence 直线接续步
CiSt: Circular Step Sequence 圆形接续步
SeSt: Serpentine Step Sequence 蛇形接续步
SpSq: Spiral Sequence 燕式接续步
