英 [ˌænɪˈmeɪʃn] US [ˌænəˈmeʃən]
n. Angry, lively; cartoon production, cartoon shooting; [film and television] animation
Plural: animations
css3 animation properties syntax
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 specifies the keyframe name that needs to be bound 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.
css3 animation property is a shorthand property that achieves animation effects by setting six animation properties. These six attributes are animation name, animation time, speed curve, animation delay, play times and whether the animation is played in reverse.
css3 animation properties example
<!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