CSSのみアニメーションが正常に動作しない

Question

ボックスシャドウを使用してアニメーションを試しました。赤色のボックスシャドウが前後に2回繰り返されていることに注意してください。私はそれがアニメーション方向：代替プロパティまたは間違ったボックスシャドウプロパティのために起こるかどうか疑います。私が間違っていることを私に教えてください。あなたが私の質問を理解したいと思っています。

.loader{ 
 
    height:20px; 
 
    width:20px; 
 
    background:#0388db; 
 
    border-radius:50%; 
 
    margin:50px; 
 
    box-sizing:border-box; 
 
    animation:boxShadow 2s linear infinite alternate; 
 
    box-shadow:0 0 3px #0388db; 
 
} 
 
@keyframes boxShadow{ 
 
    0%{ 
 
     box-shadow: -24px 0 0px -1px #0388db,24px 0 0px -1px #0388db,-24px 0 0px -2px red,24px 0 0px -2px red; 
 
    } 
 
    25%{ 
 
    box-shadow: -24px 0 0px -1px #0388db,24px 0 0px -1px #0388db,-48px 0 0px -2px red,48px 0 0px -2px red; 
 
    } 
 
    50%{ 
 
    box-shadow: -24px 0 0px -1px #0388db,24px 0 0px -1px #0388db,-24px 0 0px -2px red,24px 0 0px -2px red; 
 
    } 
 

 
    75%{ 
 
     box-shadow: 0 0 0px -1px #0388db,0 0 0px -1px #0388db,0 0 0px -2px red,0 0 0px -2px red; 
 
    } 
 
    100%{ 
 
    box-shadow:0 0 3px #0388db; 
 
    } 
 
}

<div class="loader"> 
 

 
</div>

HERE

Answer 1

.loader{ 
 
    height:20px; 
 
    width:20px; 
 
    background:#0388db; 
 
    border-radius:50%; 
 
    margin:50px; 
 
    box-sizing:border-box; 
 
    animation:boxShadow 2s linear infinite forwards; 
 
    box-shadow:0 0 3px #0388db; 
 
} 
 
@keyframes boxShadow{ 
 
    0%{ 
 
     box-shadow: -24px 0 0px -1px #0388db,24px 0 0px -1px #0388db,-24px 0 0px -2px red,24px 0 0px -2px red; 
 
    } 
 
    25%{ 
 
    box-shadow: -24px 0 0px -1px #0388db,24px 0 0px -1px #0388db,-48px 0 0px -2px red,48px 0 0px -2px red; 
 
    } 
 
    50%{ 
 
    box-shadow: -24px 0 0px -1px #0388db,24px 0 0px -1px #0388db,-24px 0 0px -2px red, 24px 0 0px -2px red; 
 
    } 
 

 
    75%{ 
 
     box-shadow: 0 0 0px -1px #0388db,0 0 0px -1px #0388db,0 0 0px -2px red,0 0 0px -2px red; 
 
    } 
 
    100%{ 
 
     box-shadow: -24px 0 0px -1px #0388db,24px 0 0px -1px #0388db,-24px 0 0px -2px red,24px 0 0px -2px red; 
 
    } 
 
}

<div class="loader"> 
 

 
</div>

使用animation-timing-functionforwardsとして、このことができます

・ホープ..

Answer 2

アニメーション方向の作業フィドルを参照してください：代替プロパティは、この例のために合いません。それを除く。

.loader{ 
 
    height:20px; 
 
    width:20px; 
 
    background:#0388db; 
 
    border-radius:50%; 
 
    margin:50px; 
 
    box-sizing:border-box; 
 
    animation:boxShadow 2s linear infinite; 
 
    box-shadow:0 0 3px #0388db; 
 
} 
 
@keyframes boxShadow{ 
 
    0%{ 
 
     box-shadow: -24px 0 0px -1px #0388db,24px 0 0px -1px #0388db,-24px 0 0px -2px red,24px 0 0px -2px red; 
 
    } 
 
    25%{ 
 
    box-shadow: -24px 0 0px -1px #0388db,24px 0 0px -1px #0388db,-48px 0 0px -2px red,48px 0 0px -2px red; 
 
    } 
 
    50%{ 
 
    box-shadow: -24px 0 0px -1px #0388db,24px 0 0px -1px #0388db,-24px 0 0px -2px red,24px 0 0px -2px red; 
 
    } 
 

 
    75%{ 
 
     box-shadow: 0 0 0px -1px #0388db,0 0 0px -1px #0388db,0 0 0px -2px red,0 0 0px -2px red; 
 
    } 
 
    100%{ 
 
    box-shadow:0 0 3px #0388db; 
 
    } 
 
}

<div class="loader"> 
 

 
</div>

Answer 3

あなたがすべき0％の変化コード0％線と25％

赤サイクルは-48と48ピクセルであるべきであり、25％に-24と24 PX

.loader{ 
 
\t height:20px; 
 
\t width:20px; 
 
\t background:#0388db; 
 
\t border-radius:50%; 
 
\t margin:50px; 
 
\t box-sizing:border-box; 
 
\t animation:boxShadow 2s linear infinite alternate; 
 
\t box-shadow:0 0 3px #0388db; 
 
} 
 
@keyframes boxShadow{ 
 
\t 0%{ 
 
\t \t box-shadow: -24px 0 0px -1px #0388db,24px 0 0px -1px #0388db,-48px 0 0px -2px red,48px 0 0px -2px red; 
 
\t } 
 
\t 25%{ 
 
\t \t box-shadow: -24px 0 0px -1px #0388db,24px 0 0px -1px #0388db,-24px 0 0px -2px red,24px 0 0px -2px red; 
 
\t } 
 
\t 50%{ 
 
\t \t box-shadow: -24px 0 0px -1px #0388db,24px 0 0px -1px #0388db,-24px 0 0px -2px red,24px 0 0px -2px red; 
 
\t } 
 
\t 75%{ 
 
\t \t box-shadow: 0 0 0px -1px #0388db,0 0 0px -1px #0388db,0 0 0px -2px red,0 0 0px -2px red; 
 
\t } 
 
\t 100%{ 
 
\t \t box-shadow:0 0 3px #0388db; 
 
\t } 
 
}

\t \t <div class="loader"> 
 
\t \t </div>