Animation Effects in CSS

CSSWeb DevelopmentFront End Technology

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 −


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

div {
   width: 100px;
   height: 100px;
   background-color: red;
   animation-name: animation;
   animation-duration: 5s;
Published on 27-Apr-2018 17:02:14