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 −


 Live Demo

<!DOCTYPE html>
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%;
<h1>CSS3 keyframe example</h1>


The above code will produce the following output −

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

Updated on 07-May-2020 11:07:28