在反向的CSS动画问题，怎么解决

html-css014

在反向的CSS动画问题，怎么解决,第1张

动画反复运行时,使用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

倒序是reversed，但是只有支持HTML5的浏览器才支持哦～IE9以下就不行了

例如：

<ol reversed>

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol>

其他普通排序：

类型值     生成样式     序列举例  

A     大写字母     A、B、C、D、E  

a     小写字母     a、b、c、c、e  

I     大写罗马数字     I、II、III、IV、V  

i     小写罗马数字     i、ii、iii、iv、v  

1     阿拉伯数字     1、2、3、4、5