アニメーションをスムーズにする方法は？

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; 

あなたはまた、ショートランドを使用することができます

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

Answer 2

CSSアニメーションのデフォルトのeasingは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