Scribd
Upload
6 views

Css Animations and Transitions

Uploaded by

Neksha Kamboj
Copyright
© © All Rights Reserved
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
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