Defining Keyframes in CSS3

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 code for defining key frames in CSS3 −

Example

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
   width: 100px;
   height: 100px;
   background: red;
   position: relative;
   animation: colorChange 5s infinite;
}
@keyframes colorChange {
   from {
      background: red;
      left: 0px;
   }
   to {
      background: rgb(32, 229, 255);
      left: 300px;
   }
}
</style>
</head>
<body>
<h1>Defining keyframes in CSS</h1>
<div></div>
<h2>The above square will change its color and position with time</h2>
</body>
</html>

Output

The above code will produce the following output −

After 5s the position and color will change as follows −

raja
Published on 12-May-2020 09:48:05
Advertisements