revision:
The animation property is a shorthand property for:
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state
Always specify the animation-duration property, otherwise the duration is 0, and will never be played.
Property values
animation-name : specifies the name of the keyframe you want to bind to the selector
animation-duration : specifies how many seconds or milliseconds an animation takes to complete
animation-timing-fuction : specifies the speed curve of the animation
animation-delay : specifies a delay before the animation will start
animation-iteration-cout : specifies how many times an animation should be played
animation-direction : specifies whether or not the animation should play in reverse on alternate cycles
animation-fill-mode : specifies what values are applied by the animation outside the time it is executing
animation-play-state : specifies whether the animation is running or paused
initial : sets this property to its default value
inherit : inherits this property from its parent element.
<div id="div1"></div>
<style>
#div1 {width: 5vw; height: 5vw; background: red; position: relative; animation: mymove 5s infinite;}
@keyframes mymove {
from {left: 0vw;}
to {left: 30vw;}
}
</style>
The animation-delay property specifies a delay for the start of an animation. The animation-delay value is defined in seconds (s) or milliseconds (ms).
Property values
time : optional. Defines the number of seconds (s) or milliseconds (ms) to wait before the animation will start. Default value is 0. Negative values are allowed. If you use negative values, the animation will start as if it had already been playing for N seconds/milliseconds.
initial : sets this property to its default value
inherit : inherits this property from its parent element.
<div>
<div id="div2"></div><br>
<div id="div3"></div>
</div>
<style>
#div2 {width: 5vw; height: 5vw; background: green; position: relative; animation: move_a 5s infinite;
animation-delay: 2s}
#div3 {width: 5vw; height: 5vw; background: blue; position: relative; animation: move_a 5s infinite;
animation-delay: -2s}
@keyframes move_a {
from {left: 0vw;}
to {left: 30vw;}
}
</style>
The animation-direction property defines whether an animation should be played forwards, backwards or in alternate cycles.
Property values
normal : default value. The animation is played as normal (forwards)
reverse : the animation is played in reverse direction (backwards)
alternate : the animation is played forwards first, then backwards
alternate-reverse : the animation is played backwards first, then forwards
initial : sets this property to its default value
inherit : inherits this property from its parent element.
<div>
<div id="div4"></div><br>
<div id="div5"></div><br>
<div id="div6"></div><br>
</div>
<style>
#div4 {width: 5vw; height: 5vw; background: yellow; position: relative; animation: move_b 5s 4;
animation-direction: alternate}
#div5 {width: 5vw; height: 5vw; background: red; position: relative; animation: move_b 5s 4;
animation-direction: reverse}
#div6 {width: 5vw; height: 5vw; background: black; position: relative; animation: move_b 5s 4;
animation-direction: alternate-reverse}
@keyframes move_b {
0% {background: red; left: 0vw; top: 0vw;}
25% {background: yellow; left: 20vw; top: 0vw;}
50% {background: blue; left: 20vw; top: 20vw;}
75% {background: green; left: 0vw; top: 20vw;}
100% {background: red; left: 0vw; top: 0vw;}
}
</style>
The animation-duration property defines how long an animation should take to complete one cycle.
Property values
time : specifies the length of time an animation should take to complete one cycle. This can be specified in seconds or milliseconds. Default value is 0, which means that no animation will occur
initial : sets this property to its default value
inherit : inherits this property from its parent element.
<div class="grid">
<div id="div7"></div>
<div id="div8"></div>
</div>
<style>
#div7 {width: 5vw; height: 5vw; background: pink; position: relative; animation: move_c infinite;
animation-duration: 3s;}
#div8 {width: 5vw; height: 5vw; background: violet; position: relative; animation: move_c infinite;
animation-duration: 6s;}
@keyframes move_c {
0% {background: black; left: 0vw; top: 0vw;}
25% {background: yellow; left: 10vw; top: 0vw;}
50% {background: red; left: 10vw; top: 10vw;}
75% {background: yellow; left: 0vw; top: 10vw;}
100% {background: black; left: 0vw; top: 0vw;}
}
</style>
The animation-fill-mode property specifies a style for the element when the animation is not playing (before it starts, after it ends, or both).
CSS animations do not affect the element before the first keyframe is played or after the last keyframe is played. The animation-fill-mode property can override this behavior.
Property values
none : default value. Animation will not apply any styles to the element before or after it is executing
forwards : the element will retain the style values that is set by the last keyframe (depends on animation-direction and animation-iteration-count)
backwards : the element will get the style values that is set by the first keyframe (depends on animation-direction), and retain this during the animation-delay period
both : the animation will follow the rules for both forwards and backwards, extending the animation properties in both directions
initial : sets this property to its default value
inherit : inherits this property from its parent element.
<div>
<div id="div9"></div><br>
<div id="div10"></div><br>
<div id="div11"></div>
</div>
<style>
#div9 {width: 5vw; height: 5vw; background: aqua; position: relative; animation: move_d 3s;
animation-delay: 2s; animation-fill-mode: forwards;}
#div10 {width: 5vw; height: 5vw; background: aqua; position: relative; animation: move_d 3s;
animation-delay: 2s; animation-fill-mode: backwards;}
#div11 {width: 5vw; height: 5vw; background: aqua; position: relative; animation: move_d 3s;
animation-delay: 2s; animation-fill-mode: both;}
@keyframes move_d {
from {left: 0vw; background-color: yellow}
to {left: 20vw; background-color: green;}
}
</style>
The animation-iteration-count property specifies the number of times an animation should be played..
Property values
number : a number that defines how many times an animation should be played. Default value is 1
infinite : specifies that the animation should be played infinite times (for ever)
initial : sets this property to its default value
inherit : inherits this property from its parent element.
<div>
<div id="div12"></div><br>
<div id="div13"></div><br>
<div id="div14"></div>
</div>
<style>
#div12 {width: 5vw; height: 5vw; background: red; position: relative; animation: move_e 3s; animation-iteration-count: 2;}
#div13 {width: 5vw; height: 5vw; background: blue; position: relative; animation: move_e 3s; animation-iteration-count: 6;}
#div14 {width: 5vw; height: 5vw; background: green; position: relative; animation: move_e 3s; animation-iteration-count: infinite;}
@keyframes move_e {
from {left: 0vw;}
to {left: 20vw;}
}
</style>
The animation-name property specifies a name for the @keyframes animation.
Property values
keyframename : specifies the name of the keyframe you want to bind to the selector
none : default value. Specifies that there will be no animation (can be used to override animations coming from the cascade)
initial : sets this property to its default value
inherit : inherits this property from its parent element.
<div>
<div id="div15"></div><br>
<div id="div16"></div><br>
<div id="div17"></div>
</div>
<style>
#div15 {width: 5vw; height: 5vw; background: black; position: relative; animation: move_f ; animation-duration: 2s;}
#div16 {width: 5vw; height: 5vw; background: yellow; position: relative; animation: move_f; animation-duration: 4s;}
#div17 {width: 5vw; height: 5vw; background: red; position: relative; animation: move_f; animation-duration: 6s;}
@keyframes move_f {
from {left: 0vw;}
to {left: 20vw;}
}
</style>
The animation-play-state property specifies whether the animation is running or paused.
Use this property in a JavaScript to pause an animation in the middle of a cycle.
Property values
paused : specifies that the animation is paused
running : default value. Specifies that the animation is running
initial : sets this property to its default value
inherit : inherits this property from its parent element.
<div>
<div id="div18"></div><br>
<div id="div19"></div><br>
</div>
<style>
#div18 {width: 5vw; height: 5vw; background: black; position: relative; animation: move_g 5s; animation-play-state: paused;}
#div19 {width: 5vw; height: 5vw; background: yellow; position: relative; animation: move_g 5s; animation-play-state: running;}
@keyframes move_g {
from {left: 0vw;}
to {left: 20vw;}
}
</style>
The animation-timing-function specifies the speed curve of an animation. The speed curve defines the TIME an animation uses to change from one set of CSS styles to another. The speed curve is used to make the changes smoothly.
Property values
linear : the animation has the same speed from start to end
ease : default value. The animation has a slow start, then fast, before it ends slowly
ease-in : the animation has a slow start
ease-out : the animation has a slow end
ease-in-out : the animation has both a slow start and a slow end
step-start : equivalent to steps(1, start)
step-end : equivalent to steps(1, end)
steps(int , start | end) : specifies a stepping function, with two parameters. The first parameter specifies the number of intervals in the function. It must be a positive integer (greater than 0). The second parameter, which is optional, is either the value "start" or "end", and specifies the point at which the change of values occur within the interval. If the second parameter is omitted, it is given the value "end"
cubic-bezier(n,n,n,n) : define your own values in the cubic-bezier function. Possible values are numeric values from 0 to 1
initial : sets this property to its default value
inherit : inherits this property from its parent element.
<div>
<div id="div20">linear</div><br>
<div id="div21">ease</div><br>
<div id="div22">ease-in</div><br>
<div id="div23">ease-out</div><br>
<div id="div24">ease-in-out</div><br>
<div id="div25">step-start</div><br>
<div id="div26">step-end</div><br>
<div id="div27">steps</div><br>
<div id="div28">cubic-bezier</div><br>
</div>
<style>
#div20 {width: 8vw; height: 5vw; background: lightgrey; position: relative;
animation: move_h 5s infinite; animation-timing-function:linear}
#div21 {width: 8vw; height: 5vw; background: yellow; position: relative;
animation: move_h 5s infinite; animation-timing-function:ease;}
#div22 {width: 8vw; height: 5vw; background: red; position: relative;
animation: move_h 5s infinite; animation-timing-function:ease-in;}
#div23 {width: 8vw; height: 5vw; background: green; position: relative;
animation: move_h 5s infinite; animation-timing-function:ease-out;}
#div24 {width: 8vw; height: 5vw; background: pink; position: relative;
animation: move_h 5s infinite; animation-timing-function:lease-in-out}
#div25 {width: 8vw; height: 5vw; background: violet; position: relative;
animation: move_h 5s infinite; animation-timing-function:step-start}
#div26 {width: 8vw; height: 5vw; background: lightblue; position: relative;
animation: move_h 5s infinite; animation-timing-function:step-end}
#div27 {width: 8vw; height: 5vw; background: seagreen; position: relative;
animation: move_h 5s infinite; animation-timing-function:steps(12, end)}
#div28 {width: 8vw; height: 5vw; background: burlywood; position: relative;
animation: move_h 5s infinite; animation-timing-function:cubic-bezier(0.42,0,0.58,1)}
@keyframes move_h {
from {left: 0vw;}
to {left: 35vw;}
}
</style>