How to make the animation smooth?
28,936
Solution 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;
Solution 2
The default easing
for CSS animations is ease
. Set it to linear
and there should be no pauses:
animation-timing-function: linear;
#preloader {
margin-left: 300px;
margin-top: 200px;
height: 20px;
width: 20px;
border-radius: 10px;
background-color: violet;
-webkit-animation-name: colorIt;
animation-name: colorIt;
-webkit-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
@-webkit-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;
}
}
@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;
}
}
<div id="preloader"></div>
Solution 3
You want to set your animation curve to be linear:
-webkit-animation-timing-function: linear; /* Chrome, Safari, Opera */
animation-timing-function: linear;
This will ensure that your animation runs smoothly:jsfiddle
Comments
-
Altair827 over 2 years
I am trying to create a pre-loader which changer its height, width, border-radius and background color.
The animation works, but it has a pause between the changes. How to make the animation smoother?
The fiddle: https://jsfiddle.net/Altair827/ww077qby/4/
#preloader { margin-left: 300px; margin-top: 200px; height: 20px; width: 20px; border-radius: 10px; background-color: violet; -webkit-animation-name: colorIt; animation-name: colorIt; -webkit-animation-duration: 3s; animation-duration: 3s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-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; } } @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; } }
<div id="preloader"></div>