Defining Keyframes in CSS3

CSS Web Development Front 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>