How to Create CSS3 Keyframe Animations?

CSSWeb DevelopmentFront End Technology

To create keyframe animations in CSS3, define individual keyframe. Keyframes will control the intermediate animation steps in CSS3.

Following is the creating keyframe animations using CSS3 −

Example

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
div {
   width: 100px;
   height: 100px;
   background: rgb(218, 78, 36);
   border: 4px solid rgb(0, 0, 0);
   position: relative;
   animation: circleMove 5s infinite;
}
@keyframes circleMove {
   from {
      left: 0px;
      border-radius: 0px;
   }
   to {
      left: 200px;
      border-radius: 50%;
   }
}
</style>
</head>
<body>
<h1>CSS3 keyframe example</h1>
<div></div>
</body>
</html>

Output

The above code will produce the following output −

After some time, the square will turn into the circle as shown −

raja
Published on 07-May-2020 11:06:41
Advertisements