animationプロパティ
animationプロパティで、高度なアニメーションがつくれます。
@keyframes 〇〇 { } で名前を宣言します。
80% { transform: 〇〇; } で地点毎の変化を指定します。
animation-name: 〇〇; で変化するスタイルを指定します。
animation-duration: 〇s; で秒数を指定します。
transformだけでは難しいアニメーションのができました。
animationの細かい制御
animation-delay: 1s; で、1秒後にアニメーションが開始します。
animation-fill-mode: forwards; で、アニメーションの終わり位置が固定されます。
animation-iteration-count: 3; で、アニメーションが3回繰り返されます。
animation-iteration-count: infinite; とすると、無限に繰り返します。
コメント