詳解逆引きHTML+CSS辞典

アニメーション - アニメーションを表示させたい

登録タグ
Icon comment count 0
Icon stock count 0

アニメーションを表示させたい

連続してなめらかに変化させたい/あらかじめ指定した通りに順番に変化させたい

@keyframes animation-nameプロパティ animation-durationプロパティ アニメーション

CSS3のアニメーションとは、簡単に言えば「切り替え効果(トランジション)」を連続して行えるようにしたものです。切り替え効果の場合は、値が変化したときに切り替え効果を適用するプロパティをtransition-propertyプロパティで指定しましたが、アニメーションの場合は@keyframes { }という書式を用いて「どのタイミングでどのプロパティをどの値にするのか」を定義して名前をつけ、その名前をanimation-nameプロパティで指定することで実行させます。アニメーションの再生時間は、animation-duration

出典情報

Medium

詳解逆引きHTML+CSS辞典

  • 著者: 大藤 幹

コメント

    コメントはありません