cssのアニメーションプロパティをつかってみた！（animation-name,duration,delay,fill-mode,iteration-count）

animationプロパティ

animationプロパティで、高度なアニメーションがつくれます。

@keyframes 〇〇 { } で名前を宣言します。

80% { transform: 〇〇; } で地点毎の変化を指定します。

animation-name: 〇〇; で変化するスタイルを指定します。

animation-duration: 〇s; で秒数を指定します。

transformだけでは難しいアニメーションのができました。

animation-delay: 1s;　で、1秒後にアニメーションが開始します。

animation-fill-mode: forwards;　で、アニメーションの終わり位置が固定されます。

animation-iteration-count: 3;　で、アニメーションが３回繰り返されます。

animation-iteration-count: infinite;　とすると、無限に繰り返します。