UNIT2

ANIMATION
An animation is nothing more than a visualization of change—a change that
occurs over a period of time.
An HTML animation is any item that appears to be moving or changing on a web
page, usually without any user input. This can be anything from a bouncing ball to
a bank of letters that flash on and off like a neon sign.

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
sorta kinda 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.
That is pretty turrible. Just turrible. 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!

You will later see how adding some other ingredients into the
pot such as timing functions (easing functions) can alter how
the interpolation works, but we'll get there later. For now, just
revel in this simplified generalization of what makes up an
animation, put on your best party clothes, and get ready to
meet the three flavors of animation that you will end up using.

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

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

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

/* The animation code */

@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}

/* The element to apply the animation to */

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

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
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
}
Set How Many Times an Animation Should Run

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:

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

INFINITE loop

div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
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
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-direction: reverse;
}
Specify the Speed Curve of the Animation:
CSS animations do not affect an element before the first keyframe is played or
after the last keyframe is played. The animation-fill-mode property can override
this behavior.

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

The following example lets the <div> element retain the style values from the last
keyframe when the animation ends:

Example
div {
width: 100px;
height: 100px;
 background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-fill-mode: forwards;
}

The following example lets the <div> element get the style values set by the first
keyframe before the animation starts (during the animation-delay period):

Example
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: backwards;
}
The following example lets the <div> element get the style values set by the first
keyframe before the animation starts, and retain the style values from the last
keyframe when the animation ends:
Example
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: both;
}
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

The following example shows some of the different speed curves that can be used:

Example
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out}

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

 transition
 transition-delay
 transition-duration
 transition-property
 transition-timing-function
o 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;
}

CSS Transition Properties

The following table lists all the CSS transition properties:

Property Description

transition A shorthand property for setting the four transition properties

transition-delay Specifies a delay (in seconds) for the transition effect

 transition-duration Specifies how many seconds or milliseconds a transition effe

transition-property Specifies the name of the CSS property the transition effect i

transition-timing-function Specifies the speed curve of the transition effect

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;
}

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.