C3_html/css_WEB-ITnose のアニメーションと変換を使用して記述された、シミュレートされた読み込みアニメーション効果

C3 でアニメーションと変換を使用して、模倣読み込みアニメーション効果を作成します< ;/h2>

;

30px;

margin:100px auto;

} .demo div{

float:left;

width:5px;
height:30px;
margin-left:5px;

}
@-webkit-keyframes 変動{
20%{
transform:scaleY(0.5);
}
0%,40%,70%,100%{
変換:scaleY(1);
}
}

.demo div:nth-of-type( 1){
背景:赤;
アニメーション: 変動 1s 0s イーズアウト無限;
}
.demo div:nth -of-type(2){
背景: yellow;
アニメーション: 変動 1 秒 0.9 秒 緩和無限大
}
.demo div:nth-of-type(3){
背景:青;
アニメーション: 変動 1 秒 0.6 s イーズ 無限;
}
.demo div:nth-of-type(4){
背景: 緑;
アニメーション: 変動 1 秒 0.4 秒イーズ 無限;
}
.demo div:nth-of-type(5) {
background:pink;
アニメーション:ゆらぎ1s 0sイーズ無限;
}


初めてブログを書く際に間違いやより良い実装方法があれば幸いです。お時間ございましたら、お気軽にプライベートメッセージをお送りください。