CSS @keyframes Rule

In CSS, the @keyframes rule can be used to create animations, which are created by gradually changing from one CSS style to another, during the animation process, you can change the CSS style settings multiple times, and use % or keywords 'from' and 'to' to specify the changes, which is similar to 0% to100% is the same, 0% is the start of the animation,100% is when the animation is complete. For the best browser support, you should always define 0% and100% selector.

@keyframes规则是css3中新增规则，目前主流浏览器都支持该规则（加浏览器对应的前缀），但不兼容IE 9@keyframes rule is css

and earlier versions of browsers. New rules have been added in later versions, and currently all mainstream browsers support this rule (with the corresponding browser prefix), but are not compatible with IE

Syntax of @keyframes rule usage

The syntax of this rule is as follows:-@keyframes animationname {keyframes-selector {css

styles;}};

Attribute value description

keyframes-animationname: defines the name of the animation;-10selector: the percentage of the animation duration, possible values: 0100%, from (and 0% is the same), to (and-0% is the same). You can use an animation keyframes

selectors;-css

styles: one or more valid CSS style properties;

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

Parameter

The table below describes the parameters of this rule.

Browser compatibility

Browser compatibility of @keyframes attribute, the numbers in the table below represent the minimum version number of browsers that support this attribute; all mainstream browsers support this rule.

For further reading

Please refer to the following tutorials:CSS Media Types.