CSS AN I M AT I O N

UNIT-2
INTRODUCTION
• An animation is nothing more than a visualization of change
• Change that occurs over a period of time
The start and end states
Interpolation
CSS animations
CSS transitions
JavaScript animation
THE START AND END STATES:
REFERENCE POINTS
INTERPOLATION:

• Intermediate states are generated between

your start and end states

• 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.
CSS ANIMATIONS
(KEYFRAMES)
• These intermediate states, if you choose to
use them, allow you to have greater control
over the things you are animating

• 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
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
• Set the animation property, and the second step is to define the keyframes that specify exactly
what getsanimated.

• The animation property is responsible for setting your animation up.

1. The name of your animation
2. The duration
3. The number of times your animation will loop

• The animation declaration doesn't really contain much in terms of details on what gets animated.
.BOX {

WIDTH: 100PX;
@KEYFRAMES MOVEBOX {
HEIGHT: 100PX;
FROM {
BACKGROUND-COLOR: RED;
LEFT: 0;
POSITION: RELATIVE;
}
ANIMATION-NAME: MOVEBOX;
TO {
ANIMATION-DURATION: 3S;
LEFT: 300PX;
ANIMATION-DELAY: 2S;
}
ANIMATION-DIRECTION: ALTERNATE;
}
ANIMATION-ITERATION-COUNT: INFINITE

ANIMATION-TIMING-FUNCTION: EASE-IN-OUT;

}
Animation name:

• The name you give your @keyframes rule acts an identifier the animation property
animation-name:@keyframe_name | none
Animation
Value timing function: Description
Linear The animation has the same speed from start to end
Ease Default value. The animation has a slow start, then fast, before it ends slowly
Ease-in The animation has a slow start
Ease-out The animation has a slow end
Ease-in-out The animation has both a slow start and a slow end
Step-start Equivalent to steps(1, start)
Step-end Equivalent to steps(1, end)
Steps(int,step-position) Specifies a stepping function, with two parameters. The first parameter specifies the number of
steps/intervals. The second parameter, specifies when the jump between values occurs

Cubic-bezier(n,n,n,n) Define your own values in the cubic-bezier function possible values are numeric values from 0
to 1
Initial Sets this property to its default value.
Inherit Inherits this property from its parent element.
Animation-duration :
The animation-duration property defines how long an animation should take to complete one cycle.
animation-duration: time
Animation-delay:
The animation-delay property specifies a delay for the start of an animation.
animation-delay: time
Animation-direction:
The animation-direction property specifies a delay for the start of an animation.
animation-direction: normal| alternate
Animation-fill-mode:
The animation-fill-mode property specifies a style for the element when the animation is not playing (before it starts, after
it ends, or both)
animation-fill-mode: none|forwards|backwards|both|initial|inherit;
Animation-iteration-count:
The animation-iteration-count property specifies the number of times an animation should be played.
animation-iteration-count: number|infinite|initial|inherit;
Animation-play-state:
The animation-play-state property specifies whether the animation is running or paused.
animation-play-state: paused|running|initial|inherit;
@KEYFRAMES
• The css @keyframes rule is used to control the steps in an animation sequence by defining CSS
styles for points along the animation sequence.

• 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. 0% is the beginning of the animation, 100% is when the
animation is complete.

• An animation is created by gradually changing from one set of css styles to another. During an
animation, you can change the set of CSS styles many times.
@keyframes: key-frame-name{percentage| from| to {CSS rules}}
DECLARING MULTIPLE ANIMATION WRAP
UP
• Apply multiple animations to an element by separating them with commas in the animation property.
.box { width: 100px; height: 100px; background: red;
animation: moveleft 2s ease-in-out, changecolor 2s ease-in-out; }
@keyframes moveleft {
0% {left: 200px;
background-color: blue; }
100% { left: 400px;
background-color: green; } }
@keyframes changecolor {
0% { background-color: pink; }
100% { background-color: orange; } }
CSS TRANSITIONS
• CSS transitions allows you to change property values smoothly, over a given duration.
1. Transitions can animate properties like color, size, and position.
2. Use selectors and pseudo-classes (e.G., :Hover) to trigger transitions.
3. Key transition properties include transition-property, transition-duration, transition-timing-function, and
transition-delay.
transition properties: background-color, color, border spacing, margin, font size, max-height

• To create a transition effect, you must specify two things:

1. The CSS property you want to add an effect to
2. The duration of the effect
Pseudo class:
CSS transitions changes behavior of an element whenever a state change occurs

• Hover: triggers when the user moves the mouse over an element
• Focus: triggers when an element (like input or button) gains focus
• Active: triggers when an element is actively being clicked (pressed down).
• Target: triggers when an elements id mateches the url‘ fragment
SHORTHAND PROPERTIES
• Shorthand property is a property that takes the values for other sets of css properties.
• We don’t have to declare individual property values separately.
• When a property value is left out in a shorthand declaration, that property takes on its
default value
Eg: border:1px solid blue;
is same as border-width:1px; border-style: solid; border-color: blue;
LONGHAND PROPERTY

• The individual properties that can be included in a shorthand property are called longhand
properties.

• Longhand notation a lot easier to work with than shorthand for better readability and clarity.