UNIT -2 Animation: What is an Animation?

The Start and End States, Interpolation,

Animations in HTML. All About CSS Animations, Creating a Simple Animation,
Detailed Look at the CSS Animation Property, Keyframes, Declaring Multiple
Animations, Wrap-up. All About CSS Transitions, Adding a Transition, Looking at
Transitions in Detail, The Longhand Properties, Longhand Properties vs. Shorthand
Properties, Working with Multiple Transitions.

What Is An Animation?
an animation is nothing more than a visualization of change - a change that occurs over a period of time.
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

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 sorta kinda like this:

1
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.

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:

Animations in HTML

In HTML, there isn't just a single animation implementation (hey, that rhymes!) 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 (aka 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

2
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:

3
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:

There are a lot of cool things you can do when you opt-out of the interpolation the browser does
for you, and you'll get a good dose of that in the tutorials that look at JavaScript Animations in
greater detail.

CSS Animations

CSS allows animation of HTML elements without using JavaScript or Flash!

In this chapter you will learn about the following properties:

 @keyframes
 animation-name
 animation-duration
 animation-delay
 animation-iteration-count
 animation-direction
 animation-timing-function
 animation-fill-mode
 Animation

4
What are CSS Animations?

An animation lets an element gradually change from one style to another.

You can change as many CSS properties you want, as many times as 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 you 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":

Eample - 1
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
</style>
</head>
<body>

5
<div></div>
</body>
</html>

Note: The animation-duration property defines how long 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).

In the example above we have specified when the style will change by using the keywords "from" and "to"
(which represents 0% (start) and 100% (complete)).

It is also possible to use percent. By using percent, you can add as many style changes as you like.

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 - 2
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}

@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
</style>
</head>

6
<body>
<div></div>
</body>
</html>

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:

Example - 3
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
}
@keyframes example {
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;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>

7
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:

Example - 4
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
}

Negative values are also allowed. If using negative values, the animation will start as if it had already been
playing for N seconds.

In the following example, the animation will start as if it had already been playing for 2 seconds:

Example - 5
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: -2s;
}

The following example uses the value "infinite" to make the animation continue for ever:

Example - 6
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;

8
 animation-iteration-count: infinite;
}
Run Animation in Reverse Direction or Alternate Cycles

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):

Example - 7

div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-direction: reverse;
}

The following example uses the value "alternate" to make the animation run forwards first, then
backwards:

Example -8
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction: alternate;
}

The following example uses the value "alternate-reverse" to make the animation run backwards first,
then forwards:

9
Example - 9

div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction: alternate-reverse;
}

CSS Animation Properties

Property Description

@keyframes Specifies the animation code

animation A shorthand property for setting all the animation properties

animation-delay Specifies a delay for the start of an animation

animation-direction Specifies whether an animation should be played forwards, backwards

or in alternate cycles

animation-duration Specifies how long time an animation should take to complete one
cycle

animation-fill-mode Specifies a style for the element when the animation is not playing
(before it starts, after it ends, or both)

10
 animation-iteration-count Specifies the number of times an animation should be played

animation-name Specifies the name of the @keyframes animation

animation-play-state Specifies whether the animation is running or paused

animation-timing-function Specifies the speed curve of the animation

The following table lists the @keyframes rule and all the CSS animation properties:

CSS Transitions

CSS transitions allows you to change property values smoothly, over a given duration.

In this chapter you will learn about the following properties:

 transition
 transition-delay
 transition-duration
 transition-property
 transition-timing-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:

11
Example - 1

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 100px;

height: 100px;

background: red;

transition: width 2s;

div:hover {

width: 300px;

</style>

</head>

<body>

<div></div>

</body>

</html>

Notice that when the cursor mouses out of the element, it will gradually change back to its original style.

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:

12
Example - 2
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: height 4s;
}
div:hover {
height: 300px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

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

<!DOCTYPE html>

<html>

<head>

<style>

div {

13
 width: 100px;

height: 100px;

background: red;

transition: width 3s;

transition-delay: 1s;

div:hover {

width: 300px;

</style>

</head>

<body>

<div></div>

</body>

</html>

Transition + Transformation

The following example adds a transition effect to the transformation:

Example

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 100px;

14
 height: 100px;

background: red;

transition: width 2s, height 2s, transform 2s;

div:hover {

width: 300px;

height: 300px;

transform: rotate(130deg);

</style>

</head>

<body>

<div></div>

</body>

</html>

15
CSS Transition Properties

The following table lists all the CSS transition properties:

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

CSS Shorthand vs Longhand Properties

A fabulous approach to improve and streamline your CSS is to exploit the a wide range of shorthand
properties accessible to you. Working with a great deal of CSS, you inevitably retain these diverse alternate
ways. Here we will demonstrate to you the shorthand guidelines for the accompanying properties:

 Background Properties
 Textual style Properties
 Transition Properties
 List Properties
 Outline and Border Properties
These are the main 5 on our rundown of most frequently utilized shorthand properties. There are others also,
even in CSS3.

16
1.Background Properties
This exceptionally helpful property permits you to consolidate a few qualities into one: the background
property. It is similar to textual style, utilizes the default values when they are not available in the
announcement.

Either the background shading or the image must be characterized. The default qualities are recorded
underneath:

image:none
attachment: scroll
color: transparent
repeat: repeat
position: left top (0 0)

Maybe the most well-known mistakes individuals make when utilizing the background property is
exchanging the position values. Luckily, most originators are more acquainted with the shorthand
documentation than the individual properties themselves.

2.Textual Style Properties

Textual styles includes various individual properties. You can spare a considerable amount of space utilizing
shorthand documentation, however be mindful so as to incorporate in any event text-size and text-family in
a specific order.

17
The majority of alternate values that were overlooked are acquired, so in the event that you haven’t set a
property somewhere else in your CSS, they will be set to the default esteem. As should be obvious, a solitary
line of code is utilized to supplant a whole block.

3.Transition Property
Unadulterated CSS transitions are the most smoking things since flapjacks, so despite the fact that just
Webkit-based programs, for example, Safari comprehend the transitions property, it is conceivable to get
transitions working in Firefox, Chrome, and Opera with only a couple of extra lines of CSS. Here are every
one of the 4 of the move properties alongside their default values:

CSS Longhand

transition-property: none;

transition-duration: none;

transition-delay: none;

transition-timing-function: none;

CSS Shorthand

transition: opacity 3s ease-in-out 1s;

18
4.List Property
There are only 3 list style properties. They are image, type and position. It is possible to combine them into a
single line.

CSS Longhand

list-style-image: url(bg.png);

list-style-position: outside;

list-style-type: disc;

CSS Shorthand

list-style: disc outside url(bg.png);

19
5.Outline and Border Properties
You can easily simplified style, width and color.

CSS Longhand

border-style: solid;

border-width: 2px;

border-color: #000;

CSS Shorthand

border: 1px solid #000;

20