CSS @keyframes规则

  • 定义和用法

    @keyframes规则指定动画代码。通过逐渐从一组CSS样式更改为另一组CSS样式来创建动画。在动画期间,您可以多次更改CSS样式集。指定样式更改将以百分比形式发生,或使用关键字“from”和“to”指定,这与0%和100%相同。0%是动画的开头,100%是动画完成的时间。
    提示:为获得最佳浏览器支持,您应始终定义0%和100%选择器。
    注意:使用动画属性可以控制动画的外观,还可以将动画绑定到选择器。
    注意:关键帧中会忽略!important规则。
  • 浏览器支持

    表中的数字指定了完全支持该属性的第一个浏览器版本。数字后跟-ms-, -webkit-,-moz-或-o-指定使用前缀的第一个版本。
    属性 IE/Edge Chrome FireFox Safari Opera
    属性名称
    @keyframes 10.0
    43.0
    4.0 -webkit-
    16.0
    5.0 -moz-
    9.0
    4.0 -webkit-
    30.0
    15.0 -webkit-
    12.0 -o-
  • CSS语法

    @keyframes animationname {keyframes-selector {css-styles;}}
  • 实例

    使元素逐渐向下移动200px:
    @keyframes mymove {
        from {top: 0px;}
        to {top: 200px;}
    }
    尝试一下
    注意:关键帧中会忽略!important规则:
    @keyframes myexample {
        from {top: 0px;}
        50% {top: 100px !important;} /* 忽略 */
        to {top: 200px;}
    }
    尝试一下
  • 属性值

    属性值 描述
    animationname 需要。 定义动画的名称。
    keyframes-selector 需要。 动画持续时间的百分比。 合法值:
    • 0-100%
    • from(相同为0%)
    • to(相同为100%)
    注意:您可以在一个动画中拥有许多关键帧选择器。
    css-styles 需要。 一个或多个合法的CSS样式属性
  • 相关页面

    HTML教程:HTML样式
    CSS教程:CSS动画