Chapter 2 Animation
What is an Animation?
Before we proceed further down the bright, lava-filled pit where
you learn how to create animations, let's take a step back and
figure out what an animation is. Let's start with a definition. At
its most basic level, an animation is nothing more than a
visualization of change - a change that occurs over a period of
time.
Let's look at that in more detail.
The Start and End States
If visualizing change is an important part of an animation, we
need to create some reference points so that we can compare
what has changed. Let's call these reference points the start state
and the end state. To better explain what is going on, let's come
up with an easy-to-understand example as well.
Let's say our start state looks as follows:
You start off with a blue circle that is small and located to the
left of the screen. At the end state, your blue circle now looks
bigger like this:
Based just on the information you have on what our blue circle
looks like in the start and end states, what can you tell is
different?
One change is the position. Our blue circle starts off on the left
side of the screen. It ends up on the right hand side. Another
change is the size. Our circle goes from being small to being
much larger.
How do we make an animation out of this? If we were to just
play the start and end states repeatedly, what you would see is
something that just bounces from left to right very awkwardly.
What we need is a way to smooth things out between the start
and end states. What we need is a healthy dose of interpolation.
Interpolation
Right now, what we have are two discrete states in time. At the
beginning, you have your start state. And the end, you have the
end state. If you were to play this back, this wouldn't be an
animation. In order to make an animation out of what we have,
we need a smooth transition that creates all the intermediate
states. This creation of the intermediate states is known
as interpolation.
This interpolation, which occurs over a period of time that you
specify, would look similar to the following diagram:
You may be wondering who specifies the interpolated states.
The answer, which is probably good news, is that your browser
or HTML rendering engine will take care of the messy details.
All you need to specify is the starting state, the ending state,
and the duration over which the transition between the two
states needs to occur. Once you have those three things, you
have an animation!
Animations in HTML
In HTML, there isn't just a single animation implementation that
you can use. You actually have three flavors of animation to
choose from, and each one is specialized for certain kinds of
tasks. Let's take a quick look at all three of them and see how
they relate to the animation definition you saw in the previous
section.
1. CSS Animations (Keyframe Animations)
CSS Animations are your traditional animations that on some
sort of performance enhancing substance that makes them more
awesome. With these kinds of animations, you can define not
only the beginning and the end state but also any intermediate
states lovingly known as keyframes:
These intermediate states, if you choose to use them, allow you
to have greater control over the thing you are animating. In the
above example, the blue circle isn't simply sliding to the right
and getting larger. The individual keyframes adjust the circle's
size and vertical position in ways that you wouldn't see if you
simply interpolated between the start and end states.
Remember, even though you are specifying the intermediate
states, your browser will still interpolate what it can between
each state. Think of a Keyframe animation as many little
animations daisy chained together.
2. CSS Transitions
Transitions make up a class of animations where you only define
the start state, end state, and duration. The rest such as
interpolating between the two states is taken care of
automatically for you:
While transitions seem like a watered down, simplified
keyframe animation, don't let that trick you. They are extremely
powerful and probably my favorite animation technique to use in
my projects. You'll see more about them shortly.
3. Scripted / JavaScript Animations
If you want full control over what your animation does right
down to how it interpolates between two states, you can use
JavaScript:
CSS Animation: CSS Animations is a technique to change the appearance and
behaviour of various elements in web pages. It is used to control the elements by
changing their motions or display.
It has two parts, one contains the CSS properties which describe the animation of
the elements and the other contains certain keyframes which indicate the animation
properties of the element and the specific time intervals at which those have to
occur.
What is a Keyframe?
Keyframes are the foundations with the help of which CSS Animations work. They
define the display of the animation at the respective stages of its whole duration.
For example: In the first example code, the paragraph changes its color with time.
At 0% completion, it is red, at 50% completion it is of orange color and at full
completion i.e. at 100%, it is brown.
CSS Animation Properties:
There are certain animation properties given below:
animation-name: It is used to specify the name of the @keyframes describing
the animation.
animation-duration: It is used to specify the time duration it takes animation to
complete one cycle.
animation-timing-function: It specifies how animations make transitions
through keyframes. There are several presents available in CSS which are used as
the value for the animation-timing-function like linear, ease, ease-in, ease-out,
and ease-in-out.
animation-delay: It specifies the delay of the start of an animation.
animation-iteration-count: This specifies the number of times the animation
will be repeated.
animation-direction: It defines the direction of the animation. animation
direction can be normal, reverse, alternate, and alternate-reverse.
animation-fill-mode: It defines how styles are applied before and after
animation. The animation fill mode can be none, forwards, backwards, or both.
animation-play-state: This property specifies whether the animation is running
or paused.
Example 1: This example describes the CSS Animation using
the @keyframe rule.
<!DOCTYPE html>
<html>
<head>
<style>
#gfg {
animation-name: color;
animation-duration: 25s;
padding-top: 30px;
padding-bottom: 30px;
font-family: Times New Roman;
}
#geeks {
font-size: 40px;
text-align: center;
font-weight: bold;
color: #090;
padding-bottom: 5px;
}
#geeks1 {
font-size: 17px;
font-weight: bold;
text-align: center;
}
@keyframes color {
0% {
background-color: red;
}
50% {
background-color: orange;
}
100% {
background-color: brown;
}
}
</style>
</head>
<body>
<div id="gfg">
<div id="geeks">GeeksforGeeks</div>
<div id="geeks1">A computer science portal for geeks</div>
</div>
</body>
</html>
Example 2: This example describes the CSS Animation Properties using
the animation-duration property
<html>
<head>
<style>
#gfg1 {
animation-name: text;
animation-duration: 5s;
animation-iteration-count: infinite;
}
#geek1 {
font-size: 40px;
text-align: center;
font-weight: bold;
color: #090;
padding-bottom: 5px;
}
#geek2 {
font-size: 17px;
font-weight: bold;
text-align: center;
}
@keyframes text {
from {
margin-top: 400px;
}
to {
margin-top: 0px;
}
}
</style>
</head>
<body>
<div id="gfg1">
<div id="geek1">GeeksforGeeks</div>
<div id="geek2">A computer science portal for geeks</div>
</div>
</body>
</html>
Example 3: This example describes the CSS Animation Properties using
the animation-timing-function property
<!DOCTYPE html>
<html>
<head>
<style>
.geeks {
font-size: 40px;
text-align: center;
font-weight: bold;
color: #090;
padding-bottom: 5px;
font-family: Times New Roman;
}
.geeks1 {
font-size: 17px;
font-weight: bold;
text-align: center;
font-family: Times New Roman;
}
h2 {
width: 350px;
animation-name: text;
animation-duration: 4s;
animation-iteration-count: infinite;
background-color: rgb(255, 210, 85);
}
#one {
animation-timing-function: ease;
}
#two {
animation-timing-function: linear;
}
#three {
animation-timing-function: ease-in;
}
#four {
animation-timing-function: ease-out;
}
#five {
animation-timing-function: ease-in-out;
}
@keyframes text {
from {
margin-left: 60%;
}
to {
margin-left: 0%;
}
}
</style>
</head>
<body>
<div class="geeks">GeeksforGeeks</div>
<div class="geeks1">A computer science portal for geeks</div>
<h2 id="one">This text is ease.</h2>
<h2 id="two">This text is linear.</h2>
<h2 id="three">This text is ease-in.</h2>
<h2 id="four">This text is ease-out.</h2>
<h2 id="five">This text is ease-in-out.</h2>
</body>
</html>
Example 4: This example describes the CSS Animation
Properties using the animation-delay property.
<!DOCTYPE html>
<html>
<head>
<style>
.geeks {
font-size: 40px;
text-align: center;
font-weight: bold;
color: #090;
padding-bottom: 5px;
font-family: Times New Roman;
}
.geeks1 {
font-size: 17px;
font-weight: bold;
text-align: center;
font-family: Times New Roman;
}
#one {
animation-name: example;
animation-duration: 10s;
}
#two {
animation-name: example;
animation-duration: 10s;
animation-delay: 10s;
}
@keyframes example {
from {
background-color: orange;
}
to {
background-color: white;
}
}
</style>
</head>
<body>
<div class="geeks">GeeksforGeeks</div>
<div class="geeks1">A computer science portal for geeks</div>
<h2 id="one">Text animation without delayed.</h2>
<h2 id="two">Text animation with 10 second delay.</h2>
</body>
</html>
Example 5: This example describes the CSS Animation
Properties using an animation-iteration-count property
<!DOCTYPE html>
<html>
<head>
<style>
.geeks {
font-size: 40px;
text-align: center;
font-weight: bold;
color: #090;
padding-bottom: 5px;
font-family: Times New Roman;
}
.geeks1 {
font-size: 17px;
font-weight: bold;
text-align: center;
font-family: Times New Roman;
}
#one {
animation-name: example;
animation-duration: 2s;
animation-iteration-count: 2;
}
#two {
animation-name: example;
animation-duration: 2s;
animation-iteration-count: infinite;
}
@keyframes example {
from {
background-color: orange;
}
to {
background-color: white;
}
}
</style>
</head>
<body>
<div class="geeks">GeeksforGeeks</div>
<div class="geeks1">A computer science portal for geeks</div>
<h2 id="one">This text changes its color two times.</h2>
<h2 id="two">This text changes its color infinite times.</h2>
</body>
</html>
Example 6: This example describes the CSS Animation
Properties using the animation-direction property.
<!DOCTYPE html>
<html>
<head>
<style>
.geeks {
font-size: 40px;
text-align: center;
font-weight: bold;
color: #090;
padding-bottom: 5px;
font-family: Times New Roman;
}
.geeks1 {
font-size: 17px;
font-weight: bold;
text-align: center;
font-family: Times New Roman;
}
h2 {
width: 100%;
animation-name: text;
animation-duration: 2s;
animation-iteration-count: infinite;
}
#one {
animation-direction: normal;
}
#two {
animation-direction: reverse;
}
#three {
animation-direction: alternate;
}
#four {
animation-direction: alternate-reverse;
}
@keyframes text {
from {
margin-left: 60%;
}
to {
margin-left: 0%;
}
}
</style>
</head>
<body>
<div class="geeks">GeeksforGeeks</div>
<div class="geeks1">A computer science portal for geeks</div>
<h2 id="one">This text is normal.</h2>
<h2 id="two">This text is reverse.</h2>
<h2 id="three">This text is alternate.</h2>
<h2 id="four">This text is alternate-reverse.</h2>
</body>
</html>
Example 7: This example describes the CSS Animation
Properties using an animation-fill-mode property.
<!DOCTYPE html>
<html>
<head>
<style>
.geeks {
font-size: 40px;
text-align: center;
font-weight: bold;
color: #090;
padding-bottom: 5px;
font-family: Times New Roman;
}
.geeks1 {
font-size: 17px;
font-weight: bold;
text-align: center;
font-family: Times New Roman;
}
h2 {
width: 400px;
background-color: orange;
animation-name: text;
animation-duration: 3s;
}
#one {
animation-fill-mode: none;
}
#two {
animation-fill-mode: forwards;
}
#three {
animation-fill-mode: backwards;
animation-delay: 2s;
}
#four {
animation-fill-mode: both;
animation-delay: 2s;
}
@keyframes text {
from {
margin-left: 0%;
background-color: #aaaaaa;
}
to {
margin-left: 60%;
background-color: #008000;
}
}
</style>
</head>
<body>
<div class="geeks">GeeksforGeeks</div>
<div class="geeks1">A computer science portal for geeks</div>
<h2 id="one">none</h2>
<h2 id="two">forwards</h2>
<h2 id="three">backwards</h2>
<h2 id="four">both</h2>
</body>
</html>
Definition and Usage
The @keyframes rule specifies the animation code.
The animation is created by gradually changing from one set of CSS styles to
another.
During the animation, you can change the set of CSS styles many times.
Specify when the style change will happen in percent, or with the keywords
"from" and "to", which is the same as 0% and 100%. 0% is the beginning of
the animation, 100% is when the animation is complete.
Tip: For best browser support, you should always define both the 0% and the
100% selectors.
Note: Use the animation properties to control the appearance of the
animation, and also to bind the animation to selectors.
CSS Syntax
@keyframes animationname {keyframes-selector {css-styles;}}
Property Values
Value Description
animationname Required. Defines the name of the animation.
keyframes- Required. Percentage of the animation duration.
selector
Legal values:
0-100%
from (same as 0%)
to (same as 100%)
Note: You can have many keyframes-selectors in one animation.
css-styles Required. One or more legal CSS style properties
Example
Add many keyframe selectors in one animation:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: mymove 5s infinite;
}
@keyframes mymove {
0% {top: 0px;}
25% {top: 200px;}
75% {top: 50px}
100% {top: 100px;}
}
</style>
</head>
<body>
<h1>The @keyframes Rule</h1>
<div></div>
</body>
</html>
Example
Change many CSS styles in one animation:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: mymove 5s infinite;
}
@keyframes mymove {
0% {top: 0px; background: red; width: 100px;}
100% {top: 200px; background: yellow; width: 300px;}
}
</style>
</head>
<body>
<h1>The @keyframes Rule</h1>
<div></div>
</body>
</html>
Example
Many keyframe selectors with many CSS styles:
@keyframes mymove {
0% {top: 0px; left: 0px; background: red;}
25% {top: 0px; left: 100px; background: blue;}
50% {top: 100px; left: 100px; background: yellow;}
75% {top: 100px; left: 0px; background: green;}
100% {top: 0px; left: 0px; background: red;}
}
Multiple animation:
The image should be rotating and growing at
the same time.
The rotation will cycle every 2 seconds.
The growth will cycle every 4 seconds.
Example Code:
.image {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin:-60px 0 0 -60px;
-webkit-animation:spin 2s linear infinite;
-webkit-animation:scale 4s linear infinite;
}
@-webkit-keyframes spin {
100% {
transform: rotate(180deg);
}
}
@-webkit-keyframes scale {
100% {
transform: scaleX(2) scaleY(2);
}
}
CSS Transitions
CSS transitions allows you to change property values smoothly, over a given
duration.
Mouse over the element below to see a CSS transition effect:
CSS Transition properties:
transition
transition-delay
transition-duration
transition-property
transition-timing-function
CSS Transition Properties in details :
Property Description
transition A shorthand property for setting the four transition
properties into a single property
transition-delay Specifies a delay (in seconds) for the transition effect
transition-duration Specifies how many seconds or milliseconds a transition
effect takes to complete
transition-property Specifies the name of the CSS property the transition
effect is for
transition-timing- Specifies the speed curve of the transition effect
function
How to Use CSS Transitions?
To create a transition effect, you must specify two things:
the CSS property you want to add an effect to
the duration of the effect
Note: If the duration part is not specified, the transition will have no effect,
because the default value is 0.
The following example shows a 100px * 100px red <div> element. The
<div> element has also specified a transition effect for the width property,
with a duration of 2 seconds:
Example
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
div: hover {
width: 300px;
}
</style>
</head>
<body>
<h1>The transition Property</h1>
<div></div>
</body>
</html>
Change Several Property Values
The following example adds a transition effect for both the width and height
property, with a duration of 2 seconds for the width and 4 seconds for the
height:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s, height 4s;
}
div:hover {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<h1>The transition Property</h1>
<div></div>
</body>
</html>
Specify the Speed Curve of the
Transition
The transition-timing-function property specifies the speed curve of
the transition effect.
The transition-timing-function property can have the following values:
ease - specifies a transition effect with a slow start, then fast, then end
slowly (this is default)
linear - specifies a transition effect with the same speed from start to
end
ease-in - specifies a transition effect with a slow start
ease-out - specifies a transition effect with a slow end
ease-in-out - specifies a transition effect with a slow start and end
cubic-bezier(n,n,n,n) - lets you define your own values in a cubic-
bezier function
The following example shows some of the different speed curves that can be
used:
Example
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
Delay the Transition Effect
The transition-delay property specifies a delay (in seconds) for the transition
effect.
The following example has a 1 second delay before starting:
Example
div {
transition-delay: 1s;
}
Transition + Transformation
The following example adds a transition effect to the transformation:
Example
div {
transition: width 2s, height 2s, transform 2s;
}
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s, height 2s, transform 2s;
}
div:hover {
width: 300px;
height: 300px;
transform: rotate(180deg);
}
</style>
</head>
<body>
<h1>Transition + Transform</h1>
<div></div>
</body>
</html>
Shorthand Property
Shorthand property is a property that takes the values for
other sets of CSS properties. For example, we can assign a
value for border-width, border-style and border-
colour using the border property alone.
longhand property
The individual properties that can be included in a shorthand
property are called longhand properties. Some examples
are; background-image, margin-left, animation-
duration, etc.
CSS Longhand
transition-property: none;
transition-duration: none;
transition-delay: none;
transition-timing-function: none;
CSS Shorthand
transition: opacity 3s ease-in-out 1s;
Multiple transitions
For multiple transitions, use the CSS3 transition property, which is a shorthand
property. It sets the property, duration, timing, and delay of the transition in a single
line.
Following is the code for performing multiple transitions
Example
<!DOCTYPE html>
<html>
<head>
<style>
.container div {
width: 300px;
height: 100px;
border-radius: 1px;
background: rgb(25, 0, 255);
border: 2px solid red;
transition: width 2s, border-radius 2s;
}
.container:hover div {
width: 100px;
border-radius: 50%;
}
</style>
</head>
<body>
<h1>Multiple transitions example</h1>
<div class="container">
<div></div>
</div>
<h2>
Hover over the above div to reduce its width and to change it into circle
</h2>
</body>
</html>
