css animation properties
Translation results:
英 [ˌænɪˈmeɪʃn] US [ˌænəˈmeʃən]
n. Angry, lively; cartoon production, cartoon shooting; [film and television] animation
Plural: animations
css animation propertiessyntax
How to use the animation attribute?
The animation attribute is an abbreviated attribute used to set six animation attributes. The basic syntax is: animation: name duration timing-function delay iteration-count direction;
Function: The animation property is a shorthand property used to set six animation properties.
Syntax: animation: name duration timing-function delay iteration-count direction;
Description: animation-name requires binding The keyframe name assigned to the selector. animation-duration specifies the time it takes to complete the animation, in seconds or milliseconds. animation-timing-function specifies the speed curve of animation. animation-delay specifies the delay before the animation starts. animation-iteration-count specifies the number of times the animation should be played. animation-direction specifies whether the animation should be played in reverse in turn.
Note: Please always specify the animation-duration attribute, otherwise the duration is 0 and the animation will not be played.
css animation propertiesexample
<!DOCTYPE html> <html> <head> <style> div { width:100px; height:100px; background:red; position:relative; animation:mymove 5s infinite; -webkit-animation:mymove 5s infinite; /*Safari and Chrome*/ } @keyframes mymove { from {left:0px;} to {left:200px;} } @-webkit-keyframes mymove /*Safari and Chrome*/ { from {left:0px;} to {left:200px;} } </style> </head> <body> <p><strong>注释:</strong>Internet Explorer 9 以及更早的版本不支持 animation 属性。</p> <div></div> </body> </html>
Run instance »
Click the "Run instance" button to view the online instance