SMS COLLEGE, BRAHMAVAR

UNIT–2
ANIMATION
Introduction

Animations are everywhere. Today, anything you do on something with a screen is just one
click, tap, or keystroke away from springing to life. Users love animations. When done right,
animations can make your applications easier to navigate, they can help your content be more
presentable, and they can even help your creations feel more alive and fun. An animation is
nothing more than a visualization of change.

Animation is the art of making inanimate objects appear to move.

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.

Let us consider the example of a blue circle:

Let's say our start state looks as follows:

MA UNIT-2 ANIMATION Page 1

 SMS COLLEGE, BRAHMAVAR

Our blue circle is just sitting around and probably up to no good. You look away and come back
a few moments later, the blue circle is now in its end state and looking a bit different:

Based just on the information you have on what the 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 page. In the end, it is located on the right hand side. Another change is the
size. The blue circle became several times larger in the end state compared to its initial size at
the beginning.

There may be a few other minor things that are different, but we captured the big ones. Now
that we have identified the changes between our end state and start state, we are one step
closer to having an animation. If we pretended for a moment that we actually have an
animation, what would you see if you just played the start and end states repeatedly?

To create an animation using what we have, we also need a way to smooth things out between
the start and end states. What we need is a healthy dose of something known as interpolation.

Interpolation:

MA UNIT-2 ANIMATION Page 2

 SMS COLLEGE, BRAHMAVAR

Interpolation is the fancy name given to the intermediate states are generated between your
start and end states. This interpolation, which occurs over a period of time that you specify,
would look something like the following diagram:

For certain kinds of animations, 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. For certain other kinds of
animations that you create in JavaScript, you will specify all of the messy details yourself.

Animations in HTML:

In HTML, there isn't just a single animation approach that you can use. You actually have three
flavors of animations to choose from, and each one is specialized for certain kinds of tasks.

CSS Animations (Keyframe Animations) :

CSS Animations are your traditional animations that are 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 commonly
known as keyframes.

MA UNIT-2 ANIMATION Page 3

 SMS COLLEGE, BRAHMAVAR

These intermediate states, if you choose to use them, allow you to have greater control over
the things 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.

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:

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:

All About CSS Animations:

One of the three ways you have for animating content in HTML is by using something known as
CSS animations. CSS animations allow you to animate CSS properties on the elements they
affect. This allows you to create all sorts of cool things like making things move, having things

MA UNIT-2 ANIMATION Page 4

 SMS COLLEGE, BRAHMAVAR

fade in and out, seeing things change color, etc. For example, imagine the animation where two
clouds are bouncing up and down.

Creating a Simple Animation

<!DOCTYPE html>

<html lang="en‐us">

<head>

<meta charset="utf‐8">

<title>Bouncing Clouds</title>
<script src="http://www.kirupa.com/js/prefixfree.min.js"></script>

<style>

#mainContent {

background‐color: #A2BFCE;

border‐radius: 4px;

padding: 10px;

width: 600px;

height: 300px;

overflow: hidden; }

.cloud {

MA UNIT-2 ANIMATION Page 5

 SMS COLLEGE, BRAHMAVAR

position: absolute; }

#bigcloud {

margin‐left: 100px;

margin‐top: 15px; }

</style>

</head>

<body>

<div id="mainContent">

<img id="bigcloud" alt="#"

class="cloud" height="154"
src="http://www.kirupa.com/images/bigCloud.png"
width="238">

</div>

</body>

</html>

Here no animation has been defined yet, so let's go ahead and add an animation. Adding a CSS
animation is made up of two steps. The first step is to set the animation property, and the
second step is to define the keyframes that specify exactly what gets animated. From the
markup you added, find the #bigCloud style rule and add the following highlighted line:

#bigcloud {

animation: bobble 2s infinite;

MA UNIT-2 ANIMATION Page 6

 SMS COLLEGE, BRAHMAVAR

margin‐left: 100px;

margin‐top: 15px;

In the meantime, add the following @keyframes style rule below where you have your
#bigCloud style block:

@keyframes bobble {

0% {

transform: translate3d(50px, 40px, 0px);

animation‐timing‐function: ease‐in;

50% {

transform: translate3d(50px, 50px, 0px);

animation‐timing‐function: ease‐out;

100% {

transform: translate3d(50px, 40px, 0px);

Once you've added this style rule, go ahead and preview your page now. You should see your
cloud bobbling around. What you just did was add a CSS animation that causes your cloud to
bobble around. Now the CSS animation allows you to specify the start state, any intermediate
states (aka keyframes), and the end state of the properties on the element (or elements) you
are wishing to animate.

The first thing we will look at is the animation property itself:

animation: bobble 2s infinite;

The animation property is responsible for setting your animation up. You will specify three
things at a minimum:

1. The name of your animation

MA UNIT-2 ANIMATION Page 7

 SMS COLLEGE, BRAHMAVAR

2. The duration

3. The number of times your animation will loop

The name of our animation is called bobble, the duration of the animation is 2 seconds, and it is
set to loop an infinite number of times. The actual substance of a CSS animation actually
resides in its @keyframes rule.

On the outside, it contains the @keyframes declaration followed by a name. On the inside, it
contains style rules (aka the actual keyframes) whose selectors are either percentage values or
the keywords from and to. These keyframe style rules just contain CSS properties such as
transform and animation‐timing‐function whose value will get applied when the rule becomes
active. Let's start by first looking at how the animation property and the @keyframes rule are
tied together.

The Name

The name you give your @keyframes rule acts an identifier the animation property uses to
know where the keyframes are.

Duration and the Keyframes:

When you define the keyframe style rules inside your @keyframes rule, your selector isn't an
actual time value. It is either a percentage value or the from/to keyword.

In our example, the percentage values for our keyframe selectors are 0%, 50%, and 100%. What
they represent is the percentage of the animation that has completed.

When your animation is just starting, you have completed 0% of your animation. The 0%
keyframe will become active. When your animation is half-way done, the 50% keyframe
becomes active. At the end of your animation, the 100% keyframe becomes active.

Detailed Look at the CSS Animation Property:

MA UNIT-2 ANIMATION Page 8

 SMS COLLEGE, BRAHMAVAR

The animation property is a whole lot more feature-filled than what we've just seen. Let's first
expand our shorthand property and look at the properties in their expanded form. Our
shorthand version, looks as follows:

animation: bobble 2s infinite;

Its expanded, longhand version will look like this:

animation‐name: bobble;

animation‐duration: 2s;

animation‐iteration‐count: infinite;

The three properties our shorthand version expands to are animation‐name, animation‐
duration, and animation‐iteration‐count.

Pausing and Resuming an Animation:

By default, your animation will start once the style rule containing your animation property
becomes active.

Each yellow rectangle represents one iteration of your animation. Once an animation starts, it
won't stop until it reaches the last keyframe.

If your animation is set to loop, it will just keep running by starting over from the first keyframe
once the last keyframe is hit. This animation will never end. It will just restart from the
beginning over and over and over again.

If you want your animation to not play immediately once the style rule containing your
animation definition becomes active or if you want to pause your animation in the middle, you
can fiddle with the animation‐play‐state property. This property allows you to toggle whether
your animation plays or not by reacting to the running value or the paused value.

By default, the animation‐play‐state property is set to running. You can set the value to paused
to stop your animation dead in its tracks.

MA UNIT-2 ANIMATION Page 9

 SMS COLLEGE, BRAHMAVAR

animation‐play‐state: paused;

When the animation is paused, it retains whatever the last computed value the animation had.

You can resume it by setting the animation‐play‐state property back to running. There is no
sudden restart where the animation goes back to the 0% mark before resuming.

Your animation smoothly picks up from where it left off just like what you would expect if you
used the Play and Pause functionality on a media player.

Delaying and Offsetting the Animation

If you want your animation to play but not really do anything for a period of time, you will want
to meet the animation‐delay property. This property allows you to specify the number of
seconds of time will elapse before your animation starts to run.

animation‐delay: 5s;

A delay isn't a case where the 0% keyframe gets hit and then you wait for 5 seconds. The delay
occurs before the 0% keyframe from your first iteration is even hit.

Once your animation starts running, the delay value never comes into play again. Every
subsequent iteration (if there are any left) of your animation just flows seamlessly from the end
of one to the beginning of the other.

Instead of specifying a positive time value for animation‐delay, you can actually specify a
negative time value as well:

animation‐delay: ‐.25s;

MA UNIT-2 ANIMATION Page 10

 SMS COLLEGE, BRAHMAVAR

When you specify a negative value, your animation starts immediately but offset by the
duration that you specified. Here is what an animation‐delay of -.25s would look like:

The negative sign acts as a signal to tell your browser to treat this value as an offset instead of a
delay.

Waiting to Start

This occurs when you are dealing with an animation‐delay set. For example, let's say you have a
5s delay specified:

For the five seconds your animation is waiting, your keyframes are not active yet. Any
properties the first keyframe contains will not get applied while the delay is active.

Animation is Done

The second case is when your animation has run to completion. Let's say you specified your
animation to loop three times:

At the end, any properties specified by the last keyframe on the 3rd iteration will disappear.
Your animated elements will return to a state where there was no evidence of an animation
ever having existed.

Meet animation-fill-mode

MA UNIT-2 ANIMATION Page 11

 SMS COLLEGE, BRAHMAVAR

If you want your starting keyframe's properties to apply during a delay or your last keyframe's
properties to be retained after your animation has ended, you can set the animation‐fill‐mode
property.

You can set its value to be:

1. none

There is no faking the property values here. If you want the keyframe's property values to
apply, your keyframe must be active.

2. forwards

After your animation has run to completion, any property values the animation had at the end
will be maintained.

3. backwards

The animation will apply the property values from the starting keyframe even if that keyframe
is not active yet.

4. both

This is the ultimate solution. Your animation will apply the property values of the first keyframe
at the beginning and maintain the property values of the last keyframe at the end.

Reversing an Animation (or Alternating Directions):

Your animations play sequentially from 0% to 100% by default. You have the ability to change
this behavior by setting the animation‐direction property to either normal, reverse, alternate,
or alternate-reverse. Both normal and reverse should be straightforward to figure out what
they do, so let's look at the more interesting values: alternate and alternate-reverse.

When you set the animation‐direction to alternate-reverse, your animation starts off normal.
Starting with the second iteration, it plays in reverse and alternates between normal and
reverse from there on out.

MA UNIT-2 ANIMATION Page 12

 SMS COLLEGE, BRAHMAVAR

Setting your animation‐direction to just alternate has a similar but slightly different behavior.
Your animation starts off in reverse and alternates between normal and reverse from that point
on.

The Animation Shorthand

What we have primarily looked at in the past few sections are the longhand properties for
declaring your animation:

Some of you may prefer using shorthand properties where all of the properties and their values
are specified inside the animation property itself. In fact, bobble animation is represented in its
shorthand variant:

animation: bobble 2s infinite;

All of the longhand properties you see above can be represented in their shorthand form, here
is what the mapping looks like:

animation: <animation‐name> <animation‐duration> <animation‐timingfunction>

<animation‐delay> <animation‐iteration‐count> <animation‐direction> <animation‐fill‐mode>;

MA UNIT-2 ANIMATION Page 13

 SMS COLLEGE, BRAHMAVAR

Simply substitute the appropriate value for the property that is displayed inside the angled
brackets. Note that the animation‐play‐state property is not something that can be represented
in shorthand. You will have to explicitly spell out that property and its value. Anyway, to put our
longhand example into shorthand, here is how everything would look:

Reusing Keyframes:

We are able to reuse the same keyframes for another declaration of the animation property. In
your current HTML document that contains only a single cloud that is bouncing, go ahead and
add ONLY the following highlighted lines:

<!DOCTYPE html>

<html lang="en‐us">

<head>

<meta charset="utf‐8">

<title>Bouncing Clouds</title>
<script src="http://www.kirupa.com/js/prefixfree.min.js"></script>

<style>

#mainContent {

background‐color: #A2BFCE;

border‐radius: 4px;

padding: 10px;

width: 600px;

height: 300px;

overflow: hidden; }

.cloud {

position: absolute; }

MA UNIT-2 ANIMATION Page 14

 SMS COLLEGE, BRAHMAVAR

#bigcloud {

animation: bobble 2s infinite;

margin‐left: 100px;

margin‐top: 15px; }

#smallcloud {

animation: bobble 4s infinite;

margin‐top: 65px;

margin‐left: 200px; }

@keyframes bobble {

0% {

transform: translate3d(50px, 40px, 0px);

animation‐timing‐function: ease‐in; }

50% {

transform: translate3d(50px, 50px, 0px);

animation‐timing‐function: ease‐out; }

100% {

transform: translate3d(50px, 40px, 0px); }

</style>

</head>

<body>

<div id="mainContent">

<img id="bigcloud" alt="#" class="cloud" height="154"

src="http://www.kirupa.com/images/bigCloud.png" width="238">
<img id="smallcloud" alt="#" class="cloud" height="103"
src="http://www.kirupa.com/images/smallCloud.png" width="158">

</div>

</body>

MA UNIT-2 ANIMATION Page 15

 SMS COLLEGE, BRAHMAVAR

</html>

Once you have added both the highlighted #smallCloud style rule and the second img element,
go ahead and preview your page. If everything was done correctly, you will now see two clouds
bouncing away.

We are referencing the exact same @keyframes rule whose name is bobble. The only
difference between #smallcloud animation declaration and the animation declaration in the
#bigCloud style rule that is duration of the animation that applies to your small cloud is 4
seconds - twice as long as the duration of the animation that applies to your large cloud:

What this means is that the properties you defined in your bobble keyframes apply just the
same for both our clouds.

The only difference is that in one animation these keyframes run through in 2 seconds, and in
the other animation, these keyframes run through at 4 seconds:

Declaring Multiple Animations:

To declare multiple animations in the same animation property, in your shorthand declaration,
simply comma separate each of your animations as shown below:

#greetings {

animation: Hello 2s infinite, good 1s infinite, morning 5s infinite;

MA UNIT-2 ANIMATION Page 16

 SMS COLLEGE, BRAHMAVAR

When declaring your animations in longhand, you would do something that looks as follows:

#greetings {

animation‐name: Hello, good, morning;

animation‐duration: 2s, 1s, 5s;

animation‐iteration‐count: infinite; }

All About CSS Transitions:

In CSS, when you change the value of a property, the change is sudden. For example, let's say that you
have the following CSS where on hover, the transform property's translate3d function has a different
value:

#box img {

transform: translate3d(0, -350px, 0);

#box img:hover {

transform: translate3d(0, 0px, 0);

cursor: pointer;

Transitions slow down the sudden change in properties. They allow you to specify how long a
particular property change will take place. They allow you to specify what kind of easing will be
applied in going from the current property value to another. Transitions basically allow you to
animate the property value changes.

With a transition applied, hover over the same logo in the following example:

This time around, instead of seeing a sudden change in the image, you can actually visualize the
intermediate positions as well. You see a gradual change as the image slides up. You see an
animation. If you interrupt the slide by hovering away before the logo reaches its final position,
notice that the transition simply animates back to its original state without any fuss.

Adding a Transition

To follow along, create a new HTML document and copy/paste the following HTML into it:

MA UNIT-2 ANIMATION Page 17

 SMS COLLEGE, BRAHMAVAR

<!DOCTYPE html>

<html>

<head>

<meta content="en-us" http-equiv="Content-Language">

<meta charset="utf-8">

<meta content="stuff, to, help, search, engines, not" name="keywords">

<meta content="What this page is about." name="description">

<meta content="An Interesting Title Goes Here" name="title">

<title>An Interesting Title Goes Here</title>

<style>

body {

background-color: #FFF;

margin: 30px;

margin-top: 10px;

#box {

width: 350px;

height: 350px;

border: 5px black solid;

overflow: hidden;

background-color: #F2F2F2;

#box img {

transform: translate3d(0, -350px, 0);

#box img:hover {

MA UNIT-2 ANIMATION Page 18

 SMS COLLEGE, BRAHMAVAR

transform: translate3d(0, 0px, 0);

cursor: pointer;

</style>

</head>

<body>

<div id="box">

<img height="700" src="//www.kirupa.com/images/html5_slider.png" width="350"></div>

<script src="//www.kirupa.com/prefixfree.min.js"></script>

</body>

</html>

If you preview this document, you will see a picture of our HTML5 logo over a yellow
background. When you hover over this image, the picture will suddenly change to show the
same logo over the black background. If this sounds familiar, it should be. This is identical to the
example without the transition you saw a few paragraphs earlier!

What we are going to do is add a CSS transition to make the change in the image's position look
smooth. Take a look at your #box img style rule:

#box img {

transform: translate3d(0, -350px, 0);

Just above the transform property declaration, add the following highlighted line that contains
our transition declaration:

#box img {

transition: transform .5s ease-in;

transform: translate3d(0, -350px, 0);

Once you've added the highlighted line, preview this document in your browser again. Hover
over the image, and (if everything worked properly) you will now see your image gently slide

MA UNIT-2 ANIMATION Page 19

 SMS COLLEGE, BRAHMAVAR

from one position to another. That's all there is to it. In the next few sections, let's look in detail
at the line you added and learn more about transitions than you ever thought you needed to
know.

What About the Vendor Prefixes?

The transition property is still pretty new, so a lot of browsers require it to be vendor prefixed
in order to have it work. Do not clutter up your markup with them. Instead, use something like
the -prefix-free library that this example uses to keep your markup simple while still allowing
older browsers to be able to view your transition.

Looking at Transitions in Detail

Now that you have a working example that uses a transition, let's try to understand why it
works. To reuse a graphic that I used in my Introduction to Animation in HTML tutorial, a
transition basically works by interpolating the points between a start state and an end state:

The start state is defined by whatever value a CSS property you are wishing to transition has
initially:

#box img {

transform: translate3d(0, -350px, 0);

The end state is the final value of that same CSS property:

#box img:hover {

transform: translate3d(0, 0px, 0);

cursor: pointer;

MA UNIT-2 ANIMATION Page 20

 SMS COLLEGE, BRAHMAVAR

Normally, this jump from the start state to the end state is sudden as you saw a few times
already. With a CSS transition in place, though, that jump is gradual and defined entirely by
your duration and whatever easing / timing function your transition specified:

transition: transform .5s ease-in;

A typical CSS transition defines the following three properties:

i. The property to apply the transition to

ii. How long the transition will last
iii. What kind of a timing function (aka easing function) to use

If you look at the transition you added in the previous section, you can see how what we
specified maps to these three properties perfectly...like a glove:

What you see above is the shorthand declaration for the transition property. As shorthand
properties go, the values it specifies map to CSS properties of their own.

Transition Property

The first value you specify in your transition declaration maps to the transition-property CSS
property. Here, you specify the CSS property you want your transition to listen for changes on:

Transition Duration

MA UNIT-2 ANIMATION Page 21

 SMS COLLEGE, BRAHMAVAR

The second value in our transition declaration maps to the transition-duration property. This
property expects a numerical value that specifies how long the transition will run:

This is a pretty simple one. To have your transition run for a long time, specify a large duration
value. To have a quick transition, specify a small value such as the .5 seconds specified in our
example.

Transition Timing Function (Easing Function)

The third value maps to the transition-timing-function property whose value specifies the rate
at which your property values change from their initial value to their final value:

This rate change is more formally defined as a timing function. By default, your values change
linearly with time:

MA UNIT-2 ANIMATION Page 22

 SMS COLLEGE, BRAHMAVAR

This results in a transition that neither seems to speed up or slow down. It is just constant. You
can override this default behavior and specify something more interesting:

This overriding is done by specifying a timing function that will suit your needs. The timing
functions you can specify are:

 ease
 linear
 ease-in
 ease-out
 ease-in-out
 step-start
 step-end
 steps()
 cubic-bezier()

Depending on the function you choose, your transition may seem like it is accelerating,
decelerating, or doing a combination of both.

Delaying the Transition

There is actually a lesser used fourth value that you can set on your transition declaration, and
this value maps to the transition-delay property:

MA UNIT-2 ANIMATION Page 23

 SMS COLLEGE, BRAHMAVAR

As you can imagine based on the property name, the duration you specify determines how long
to wait before starting your transition.

Let's say you specify a positive value:

transition: all .5s ease-in .1s;

A positive value specifies how long your transition will wait before kicking in. This is what you
would expect this property to do. For example, given the above declaration, our transition will
wait for .1 seconds before starting.

A negative value does something a bit different:

transition: all .5s ease-in -.1s;

With a negative value, what you are specifying is the point in time in the middle of the
transition to start from. If your transition is .5 seconds and your transition delay is -.1 seconds,
your transition will (rudely!) start in the middle of the .1 second mark.

The Longhand Properties

The shorthand declaration expanded into the longhand version looks as follows:

transition-property: all;

transition-duration: .5s;

transition-timing-function: ease-in;

transition-delay: .1s;

To more properly introduce them, the four transition-related properties are the transition-
property, transition-duration, transition-timing-function, and transition-delay.

Of course, the observed behavior between using the shorthand version or the longhand version
is no different. They both create the same end result, so which you prefer to use is entirely up
to you...sort of.

Longhand Properties vs. Shorthand Properties

In general, we prefer the shorthand version because of its compactness. The only time we don't
use the shorthand property is when we plan to modify my transition using JavaScript. Let's say
my transition is declared in my CSS as follows:

transition: width 1s ease-out;

MA UNIT-2 ANIMATION Page 24

 SMS COLLEGE, BRAHMAVAR

We have some code that changes the duration of my transition on the fly. This code does
something as follows:

obj.style.transitionDuration = ".2s";

If you let this code execute, what do you think our transition will look like. Logically, since you
only changed the transition's duration to .2 seconds, you would expect the transition to
virtually look as follows:

transition: width .2s ease-out;

What actually happens is quite illogical. By setting the transitionDuration property, the entire
transition goes away. All you see is evidence of your transitionDuration being set, but the
original transition declaration and any values its shorthand properties contained are gone.

The proper way to deal with this situation is to set the transition property in its entirety again:

obj.style.transition = "transition: all " + myDuration + "s easein;";

The end result is a string that looks exactly like our initial transition declaration defined in the
CSS. To me, this looks awkward. The way I work around this is by having all of the transition
properties declared separately as longhand variants:

transition-property: width;

transition-duration: 1s;

transition-timing-function: ease-out;

This way, if I want to modify the duration using JavaScript, only the style declaration for
transition-duration will be overwritten. I don't have to worry about the existing non-duration
properties getting obliterated with me having to rebuild them.

Working with Multiple Transitions:

Declaring multiple transitions is pretty straightforward. When using the transition shorthand,
separate each transition's property values with a comma:

transition: width .5s ease-in, border-radius 1s linear;

For the longhand form, simply tackle on any additional values as needed to the appropriate
transition property:

transition-property: width, border-radius;

MA UNIT-2 ANIMATION Page 25

 SMS COLLEGE, BRAHMAVAR

transition-duration: .5s, 1s;

transition-timing-function: ease-in, linear;

If you have a mismatched number of values, the standard behavior for ensuring your CSS
properties have well-defined values kicks in.

Listening to Multiple Properties:

If you want to listen to a handful of properties individually, just use the longhand version and
list all of the properties you want your transition to listen to in the transition-property property:

transition-property: width, border-radius, background

color;

transition-duration: .5s;

transition-timing-function: ease-out;

What you've basically defined is three separate transitions (one for each transition-property
value) that each have a duration of .5 seconds with an ease-out timing function specified. This is
all should be pretty straightforward.

The transitionEnd Event :

The last thing (for real this time) we are going to mention is the transitionEnd event. When a
transition has run to completion, the elements affected by the transition fire the transitionEnd
event.

MA UNIT-2 ANIMATION Page 26