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-

@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样式属性