Как сделать анимацию гладкой?

Question

Я пытаюсь создать предварительный загрузчик, который меняет его высоту, ширину, радиус границы и цвет фона. Скрипка: 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; 
    } 
} 

анимация работает, но есть пауза между изменениями. Как сделать анимацию более гладкой?

Answer 1

Вы должны изменить YOUT функцию синхронизации:

animation-timing-function: linear; 

Вы также можете использовать Shortland:

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

Answer 2

По умолчанию easing для анимации CSS - ease. Установите его в linear и не должно быть никаких пауз:

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>

Answer 3

Вы хотите установить кривую анимацию линейные:

-webkit-animation-timing-function: linear; /* Chrome, Safari, Opera */ 
animation-timing-function: linear; 

Это будет гарантировать, что ваша анимация проходит гладко: jsfiddle