April 2018
Beginner
368 pages
7h 37m
English
CSS animation allows for the creation of animation without JS or Flash, with keyframes and every CSS property. It offers more advantages than a simple transition.
To create a CSS animation, you need to create a keyframe:
/* The animation code */@keyframes example { from {background-color: red;} to {background-color: yellow;}}
from means at the start of the animation, while to means at the end of the animation.
You can also be more precise with the timeframe by setting the percentage:
/* The animation code */@keyframes example { 0% {background-color: red;} 25% {background-color: yellow;} 50% {background-color: blue;} 100% {background-color: green;}}
To trigger the animation, you need to call it in the specific div with the ...