Defining Keyframes in CSS3

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 −


 Live Demo

<!DOCTYPE html>
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;
<h1>Defining keyframes in CSS</h1>
<h2>The above square will change its color and position with time</h2>


The above code will produce the following output −

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