Scribd
Upload
19 views7 pages

CSS Animations and Transition

CSS enables the animation of HTML elements without JavaScript or Flash by allowing gradual style changes through keyframes. Key properties for animations include duration, delay, and iteration count, while transitions require specifying the property to change and the duration of the effect. This document outlines the basics of CSS animations and transitions, including their properties and usage.

Uploaded by

codespartanssxc
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
19 views7 pages

CSS Animations and Transition

CSS enables the animation of HTML elements without JavaScript or Flash by allowing gradual style changes through keyframes. Key properties for animations include duration, delay, and iteration count, while transitions require specifying the property to change and the duration of the effect. This document outlines the basics of CSS animations and transitions, including their properties and usage.

Uploaded by

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

CSS Animations

and Transitions

-Pratiksha Dhavale
Animations

CSS allows animation of HTML elements without using JavaScript or Flash!

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 hold what styles the element will have at certain times.
The @keyframes Rule

When you specify CSS styles inside the @keyframes rule, the animation will
gradually change from the current style to the new style at certain times.
CSS Animation Properties

Animation-duration - how long an animation should take to complete.

Animation-delay - delay for the start of an animation

Animation-iteration-count - number of times an animation should run


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 an effect to


● the duration of the effect
CSS Transition Properties
Q&A

You might also like