Successfully reported this slideshow.
You’ve unlocked unlimited downloads on SlideShare!
CSS Animations are a working proposal of the w3c to enable animations of CSS properties over time.
CSS Transitions, something different from CSS Animations were provided as a basic way to describe how a css property changes from one value to another.
CSS Animations are a way to define an animation that is explicitly set on animation.You can think of transitions as implicit and animations as explicit.
So lets look at a brief example. I want to animate Hello world’s font-size from 20px to 40px and make it go from green to yellow to red.
I’ll define the rules for the animation in a @keyframes animation.I’ll call this the amaze animation.I can define what properties the animation should start with, intermediate states, and how the animation should finish.
On click, I’ll set the name of the animation and how long I want it to last for.Once the animation is done, I’ll remove the animation name (this helps with restarting an animation)
showing standardneed to use vendor prefixes
a keyframes lists an animation name, an optional from, num, and to
animation properties are set in CSS or programatically with JS