Animation Effects in CSS

The animation is the process of creating motion effects and changes the appearance.CSS does support different animation effects to change the event motion.

Under Animation, a concept Keyframes is used. Keyframes will control the intermediate animation steps in CSS3.

The below example shows height, width, color, name, and duration of animation with keyframes syntax −

Syntax

@keyframes animation {
   from {background-color: pink;}
   to {background-color: green;}
}

div {
   width: 100px;
   height: 100px;
   background-color: red;
   animation-name: animation;
   animation-duration: 5s;
}