There are two ways to animate things with CSS. One is with the transition property. The other way is with the by creating a keyframe animation and the animation property. This video and article are referring to the Animation method.
CSS Animations require two things to work. First you need to set up the animation and it’s keyframes. Second, you need to call or use the animation and set up it’s properties, such as the duration of the animation, how many times it should run, it’s easing method and more.
Set Up the Animation
As of today, only webkit browsers need the prefix. IE, Opera, and Firefox all work off of the un-prefixed code.
Fade In and Out
Shrink and Grow
Use the Animation