CSS3 style properties allows you to change transition smoothly.
@keyframes and
animation keywords are sufficient to do animations.
@keyframes - every animation has a sequence of frames where each frame display one by one which looks like running animation. CSS @keyframes is a container of frames.
@keyframes <NAME-OF-ANIMTION>{
<KEY-POSITION> { <CSS-STYLE> }
}animation - animation property control the execution of keyframes.
animation: <NAME-OF-ANIMTION> <TOTAL-TIME> <TIMING> <START-DELAY> <REPEAT> <DIRECTION>