詳解逆引きHTML+CSS辞典

アニメーション - 切り替え効果を適用したい

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

切り替え効果を適用したい

じわっと色を変化させたい/徐々に位置を変化させたい/徐々に大きさを変化させたい/2つの状態をなめらかに切り替えたい

transition-propertyプロパティ transition-durationプロパティ 切り替え効果 トランジション

セレクタの:hoverなどを使って色や大きさ、位置などを変更すると、通常は瞬時に表示が切り替わります。それを、指定した時間をかけてアニメーションのようになめらかに変化させるのがCSS3の切り替え効果(トランジション)です。色であれば徐々に変化し、位置であれば動いているように移動し、回転であれば実際にアニメーションのように動いて回転します。

切り替え効果を適用するには、transition-propertyプロパティとtransition-durationプロパティを使用します。transition-propertyプロパティは、どのプロパティの値が切り替わったときにそれに切り替え効果を

出典情報

Medium

詳解逆引きHTML+CSS辞典

  • 著者: 大藤 幹

コメント

    コメントはありません