Animation effects in CSS

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

Under Animation, there is a concept Keyframes that has been used. Keyframes will control intermediate animation steps in CSS3.

The following example uses keyframe syntax to display the height, width, color, name, and duration of the animation -

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;
}

The above is the detailed content of Animation effects in CSS. For more information, please follow other related articles on the PHP Chinese website!