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