How to make the animation smooth?

Question

I am trying to create a pre-loader which changer its height, width, border-radius and background color. The fiddle : https://jsfiddle.net/Altair827/ww077qby/4/

@keyframes colorIt{
  from{
background-color: violet;
  }
  to 20%,40%,60%,80%,90%,99%{

  }
  20%{
     background-color: indigo;
     height:40px;
     width:40px;
     border-radius:20px;
  }
  40%{
     background-color: blue;
     height:50px;
     width:50px;
     border-radius:25px;
  }
  60%{
     background-color: green;
     height:60px;
     width:60px;
     border-radius:30px;
 }
 80%{
    background-color: yellow;
    height:70px;
    width:70px;
    border-radius:35px;
 }
 90%{
    background-color: orange;
    height:80px;
    width:80px;
     border-radius:40px;
  }
  99%{
    background-color: red;
    height:20px;
    width:20px;
    border-radius:10px;
  }
}

The animation works, but it has a pause between the changes. How to make the animation smoother?

Answer 1

You should change yout timing function:

animation-timing-function: linear;

You could also use a shortland:

/* @keyframes duration | timing-function | delay | name */
animation: 3s linear .1s colorIt;