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

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