CSS Animations

CSS Animations
CSS Animations
• CSS allows animation of HTML elements without using
JavaScript or Flash!
• learn about the following properties:
✔ @keyframes
✔ animation-name
✔ animation-duration
✔ animation-delay
✔ animation-iteration-count
✔ animation-direction
✔ animation-timing-function
✔ animation-fill-mode
✔ animation
What are CSS Animations?
• An animation lets an element gradually change
from one style to another.
• Can change as many CSS properties you want, as

many times you want.
• To use CSS animation, you must first specify some

keyframes for the animation.
• Keyframes hold what styles the element will have

at certain times.
The @keyframes Rule
• When specify CSS styles inside the @keyframes rule,
the animation will gradually change from the current style
to the new style at certain times.
• To get an animation to work, you must bind the animation

to an element.
• The following example binds the "example" animation to

the <div> element. The animation will last for 4 seconds,
and it will gradually change the background-color of the
<div> element from "red" to "yellow": Example
/* The animation code */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* The element to apply the animation to */

div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
• The animation-duration property defines how long time an
animation should take to complete.
• If the animation-duration property is not specified, no
animation will occur, because the default value is 0s (0
seconds).
• keywords "from" and "to" (which represents 0% (start) and
100% (complete)).
• It is also possible to use percent.
• The following example will change the background-color
of the <div> element when the animation is 25% complete,
50% complete, and again when the animation is 100%
complete:
Example
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}

div {
width: 100px;
height: 100px;
}
• The following example will change both
the background-color and the position of
the <div> element when the animation is
25% complete, 50% complete, and again
when the animation is 100% complete:
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}

div {
width: 100px;
height: 100px;
position: relative;
}
Delay an Animation
• The animation-delay property specifies a delay for the start of
an animation.
• The following example has a 2 seconds delay before starting
the animation:
div {
width: 100px;
height: 100px;
position: relative;
animation-delay: 2s;
}
Note
• Negative values are also allowed.
• If using negative values, the animation will
start as if it had already been playing for N
seconds.
animation-iteration-count
• The animation-iteration-count property specifies the number of
times an animation should run.
• The following example will run the animation 3 times before it
stops:
div {
width: 100px;
height: 100px;
position: relative;
animation-iteration-count: 3;
} value "infinite" to make the animation continue for ever:
animation-iteration-count: infinite;
animation-direction property
• The animation-direction property specifies whether an animation
should be played forwards, backwards or in alternate cycles.
The animation-direction property can have the following values:
• normal - The animation is played as normal (forwards). This is
default
• 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
The following example will run the animation in reverse direction
(backwards):
div {
width: 100px;
height: 100px;
position: relative;
animation-direction: reverse;
}
animation-timing-function property
• The animation-timing-function property specifies the speed
curve of the animation.
• The animation-timing-function property can have the following
values:
• ease - Specifies an animation with a slow start, then fast, then
end slowly (this is default)
• linear - Specifies an animation with the same speed from start
to end
• ease-in - Specifies an animation with a slow start
• ease-out - Specifies an animation with a slow end
• ease-in-out - Specifies an animation with a slow start and end
• cubic-bezier(n,n,n,n) - Lets you define your own values in a
cubic-bezier function
<!DOCTYPE html> @keyframes mymove {
<html>
<head>
from {left: 0px;}
<style> to {left: 300px;}
div { }
width: 100px; </style></head>
height: 50px;
<body>
font-weight: bold;
<p><strong>Note:</strong> The
position: relative; animation-timing-funtion property
animation: mymove 5s infinite; </p>
}
#div1 {animation-timing-function: linear;}

<div id="div1">linear</div>
#div2 {animation-timing-function: ease;} <div id="div2">ease</div>
#div3 {animation-timing-function: ease-in;} <div id="div3">ease-in</div>
#div4 {animation-timing-function: <div id="div4">ease-out</div>
ease-out;}
#div5 {animation-timing-function:
<div id="div5">ease-in-out</div>
ease-in-out;}
</body>
</html>
animation-fill-mode property
• The animation-fill-mode property specifies a style for the target
element when the animation is not playing (before it starts, after it
ends, or both).
• The animation-fill-mode property can have the following 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
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-fill-mode: forwards;
}

CSS Animations

Uploaded by

Copyright:

Available Formats

CSS Animations

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSS Animations

Uploaded by

Copyright:

Available Formats

CSS Animations

• Can change as many CSS properties you want, as

• To use CSS animation, you must first specify some

• Keyframes hold what styles the element will have

• To get an animation to work, you must bind the animation

• The following example binds the "example" animation to

/* The element to apply the animation to */

/* The element to apply the animation to */

/* The element to apply the animation to */

#div1 {animation-timing-function: linear;}

You might also like