What are the properties that implement animation effects in css3

Attributes to achieve animation effects in CSS: 1. "animation" attribute, which can be used in conjunction with the "@keyframes" rule to set animation effects for elements; 2. "transition" attribute, which can give Elements are animated excessively.

The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.

What are the properties used to achieve animation effects in css3

In css, if you want to achieve animation effects, you can use the animation attribute and transition attribute.

1. The animation attribute is an abbreviated attribute, used to set six animation attributes. The syntax is as follows:

animation: name duration timing-function delay iteration-count direction;

The attribute value is as follows:

Examples are as follows:

   
  
注释：Internet Explorer 9 以及更早的版本不支持 animation 属性。
 
  

Output results:

2. The transition attribute is an abbreviated attribute used to set four transition attributes. The syntax is as follows :

transition: property duration timing-function delay;

The attribute value is as follows:

The example is as follows:

   
  
 
请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。
 
注释：本例在 Internet Explorer 中无效。
  

Output result:

(Learning video sharing:css video tutorial)

The above is the detailed content of What are the properties that implement animation effects in css3. For more information, please follow other related articles on the PHP Chinese website!