Scribd
Upload
6 views

Css Animations and Transitions

Uploaded by

Neksha Kamboj
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
6 views

Css Animations and Transitions

Uploaded by

Neksha Kamboj
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 11

CSS ANIMATIONS AND

TRANSITIONS
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:
When we specify CSS styles inside the @keyframes
the animation will gradually change from the
current style to new style at certain times.

Example:
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
Animation Properties
• animation-name
• animation-duration
• animation-delay
• animation-iteration-count
• animation-direction
• animation-timing-function
• animation
• Animation -name
Specifies the name of the @keyframes at-rule describing an
animation's keyframes

• Animation-duration
The animation-duration property defines how long an
animation should take to complete.

• Animation-delay
The animation-delay property specifies a delay for the start of
an animation.

• Animation-iteration count
The animation-iteration-count property specifies the number
of times an animation should run.
• Animation-direction
The animation-direction property specifies whether an
animation should be played forwards, backwards or in
alternate cycles.

• Animation timing function


The animation-timing-function property specifies the speed
curve of the animation.
 Ease
 Linear
 Ease-in
 Ease-out
 Ease-in-out
 Cubic beizer
• Animation
The animation shorthand is useful for saving space.

Example:
p{
animation-duration: 3s;
animation-name: slide-in;
animation-iteration-count: infinite;
animation-direction: alternate;
}

This can be replaced by animation shorthand property as

p{
animation: 3s infinite alternate slide-in;
}
TRANSITIONS
• CSS transitions allows you to change property values
smoothly, over a given duration.

TRANSITION PROPERTIES
• transition
• transition-delay
• transition-duration
• transition-property
• transition-timing-function
• Transition
CSS Transitions are controlled using the
shorthand transition property. This is the best way to
configure transitions.
Example:
div {
transition: width 2s linear 1s;
}

• Transition-delay
The transition-delay property specifies a delay (in
seconds) for the transition effect.

• Transition-property
Specifies the name or names of the CSS properties to
which transitions should be applied
• Transition timing function
The transition-timing-function property specifies the
speed curve of the transition effect.
 Ease
 Linear
 Ease-in
 Ease-out
 Ease-in-out
 Cubic beizer

• Transition-duration
Specifies the duration over which transitions should
occur.
THANK YOU

You might also like