UNIT-2

Animation

Content
 What is an Animation? The start and End states
 Interpolation, Animation in HTML.
 All bout CSS animation
 Creating a simple animation.
 Detailed look at the CSS animation property
 Keyframes, Declaring multiple animations
 All about CSS transitions, adding a transition, Looking at transitions in detail
 Long hand and short hand properties
 working with multiple transitions

What is Animation?

An animation is nothing more than a visualization of change. A change that occurs over a period of time.
Animation means giving life to any object in computer graphics. It has the power of adding energy to the inanimate
objects. It can be used in many areas like entertainment, computer aided-design, scientific visualization, training,
education, e-commerce, and computer art.

Start and End States

The start and end states are the reference point for us to compare what has changed. It helps us to visualize the
change. For example, let us consider a blue circle at the left side of our screen which acts as our start state.

Start End

You start off with a small blue circle located to the left of the screen. At the end state,
your blue circle now looks bigger as shown

Start End

We can now observe that There is a change in the position, our blue circle starts off on the left side of the screen. It
ends up on the right side. And another change is the size, circle goes from being small to being much larger.
How do we make an animation out of this? If we play only the start and end states repeatedly, what you would see is a
circle that just bounces from left to right without a smooth transition.

Though, Start and end states help us in setting the reference point for our animation, we need to use interpolation to
create smooth transition and hence better visualization of the change.
Interpolation: Interpolation is the process of creating the intermediate states between start state and end state in order
to avoid awkward animation and create smooth transition and better visualization of change.
This interpolation occurs over a period of time you specify.

Animations in HTML: In HTML, we can have three types of animation.

1. CSS Animations: CSS Animations are your traditional animations. It is also called as keyframe
animation.With these kinds of animations, you can define not only the beginning and the end
state but also any intermediate states known as keyframes.

These intermediate states, allow you to have greater control over the object you are animating. In the above example,
the blue circle isn't simply sliding to the right and getting larger. The individual key frames adjust the circle's size and
vertical position in such a way that you would not see if you simply interpolated between the start and end
states. However, even though you are specifying the intermediate states, your browser will still interpolate between
each state. Every CSS animation has two parts to it: One or more animation properties along with a set of animation
keyframes that are defined using the @keyframes at-rule.
Syntax: @keyframes moveObject {
0% {
transform: translateX(0);
}
50% {
transform: translateX(300px);
 }
100% {
transform: translateX(300px) scale(1.5);
}}
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 us.

3. Scripted / JavaScript Animations : If we want full control over what the animation right down to how it
interpolates between two states, We can use JavaScript:

All about CSS Animation and creating simple animation

CSS animations is one of the way to perform animation. What CSS animations do is pretty simple. They allow
you to animate CSS properties on the elements they affect. This allows you to make things move, create fade in and
out, change colour etc. It 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. However, to use CSS animation, you must first specify some
keyframes for the animation which hold styles that the element will have at certain times.

Example : 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-colour of the <div> element from "red" to "yellow"

@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 properties: We can set different animation properties to an object. It includes

The animation-name property: Every CSS animation you create has to have a name that appears in
the @keyframes syntax. This name has to be the same name defined using the animation-name property.

Example :
.box {
animation-name: moveObject;
}

1. The animation-duration property : The animation-duration property, defines the amount of time an animation
takes to run once from start to end. This value can be specified in seconds or milliseconds, as shown below:
.box {
animation-duration: 2s;
}

2. The animation-timing-function property: The animation-timing-function, is used to define the manner in which
the CSS animation progresses.
.box {
animation-timing-function: linear;
}
This property accepts the following keyword values:
 ease (the initial value)
 ease-in : will start the animation slowly, and finish at full speed.
 ease-out : will start the animation at full speed, then finish slowly.
 ease-in-out : will start slowly, be fastest at the middle of the animation, then finish slowly.
 Linear : uses no easing.

3. The animation-iteration-count property: The animation-iteration-count property lets you to repeat the
animation by accepting a positive number representing the number of times you want the animation to run as
argument
.box {
animation-iteration-count: 3;
}
The initial value for animation-iteration-count is 1 but you can also use the keyword infinite (self-explanatory) or use
a fractional value. A fractional value will run the animation part way through on the fractional run:
.box {
animation-iteration-count: 3.5;
}

4. The animation-direction property: The animation-direction property works nicely in conjunction

with animation-iteration-count. The animation-direction property allows you to define which direction you
want the animation to play.
.box {
animation-direction: alternate;
}
You can set the value as one of four keywords:
 normal – The animation plays forwards on the first iteration (the default)
 reverse – Animation plays backwards on the first iteration
 alternate – The animation plays forwards on the first iteration then alternates on subsequent iterations
 alternate-reverse – Same as alternate but plays backwards on the first iteration
 5. The animation-play-state property : The animation-play-state property is not extremely useful in a static CSS
environment but might come in handy when writing animations that are interactive via JavaScript or CSS.
This property accepts two values: running or paused:
.box {
animation-direction: paused;
}
6. The animation-delay property: Some animations are designed to start animating immediately, whereas others
could benefit from a slight delay before the first iteration. The animation-delay property allows you to
accomplish this.
.box {
animation-delay: 4s;
}

Example :
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: both;
}

@keyframes example {
from {top: 0px; background-color: yellow;}
to {top: 200px; background-color: blue;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>Let 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:</p>

<div></div>

</body>
</html>
CSS Transitions

CSS transitions allows you to change property values smoothly, over a given duration.To create a transition effect,
you must specify two things:
• the CSS property you want to add
• the duration of the effect
Example
<!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>
<p>Hover over the div element below, to see the transition effect:</p>
<div></div>
</body>
</html>

Example to set multiple transition properties

<!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>
<p>Hover over the div element below, to see the transition effect:</p>
<div></div>
</body>
</html>
Example 3:

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
#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;}
div:hover {
width: 300px;
}
</style>
</head>

Shorthand CSS and Long Hand CSS : Shorthand CSS is the creation of CSS elements with minimal code while
writing style files and Longhand CSS is the creation of CSS elements with long codes while writing style files.

/* Longhand CSS */
.margin
{
margin-top: 5px;
margin-right: 6px;
margin-bottom: 7px;
margin-left: 8px;
}
/* Shorthand CSS */
.margin {
margin: 5px 6px 7px 8px;
}
/* Longhand CSS */
.transition
{
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease;
transition-delay: 0s;
}
/* Shorthand CSS */
.transition
{
transition: 1s all ease;
}