CSS 参考手册

CSS @规则(RULES)

CSS 属性大全

CSS @keyframes 规则

在css中，@keyframes规则可以使用来创建动画，创建动画是通过逐步改变从一个CSS样式到另一个CSS样式，在动画过程中，您可以更改CSS样式的设定多次，指定的变化时发生时使用％，或关键字"from"和"to"，这是和0％到100％相同，0％是开头动画，100％是当动画完成。为了获得最佳的浏览器支持，您应该始终定义为0％和100％的选择器。

@keyframes规则是css3中新增规则，目前主流浏览器都支持该规则（加浏览器对应的前缀），但不兼容IE 9以及更早版本的浏览器。

@keyframes 规则的使用语法

该规则的语法如下：

@keyframes animationname {keyframes-selector {css-styles;}};

属性值说明

animationname：定义animation的名称；

keyframes-selector：动画持续时间的百分比，可能的值：0-100%、from (和0%相同)、to (和100%相同)。您可以用一个动画keyframes-selectors；

css-styles ：一个或多个合法的CSS样式属性；

下面的示例显示了实际@keyframes的规则。

      .box {
          width: 50px;
          height: 50px;
          background: red;
          position: relative;
          /* Chrome, Safari, Opera */
          -webkit-animation-name: moveit;
          -webkit-animation-duration: 2s;
          
          animation-name: moveit;
          animation-duration: 2s;
      }
       
      /* Chrome, Safari, Opera */
      @-webkit-keyframes moveit {
          from {left: 0;}
          to {left: 50%;}
      }
       
      
      @keyframes moveit {
          from {left: 0;}
          to {left: 50%;}
      }
测试看看

注意：如果关键帧选择器指定了负百分比值或高于的值100%，则关键帧将被忽略。

参量

下表描述了此规则的参数。

值描述
必需 -要使CSS有效，需要以下参数。
animation-name动画的名称。
keyframes-selector指定沿动画持续时间的百分比。关键帧规则的关键帧声明块由属性和值组成。

浏览器兼容性

@keyframes属性浏览器的兼容性，下表中的数字表示支持该属性的浏览器最低版本号；所有主流浏览器均支持该规则。

浏览器图标

  • Firefox 5+ -moz-，16 +

  • Google Chrome 4+ -webkit-

  • Internet Explorer 10+

  • Apple Safari 4+ -webkit-

  • Opera 12+ -o-，15+ -webkit-

进一步阅读

请参考以下教程：CSS Media Types。

CSS @media 规则CSS @import 规则