ホバーしたら数字が1回転するコードを使ってtransitonの理解を深める①

概要

ホバーしたら数字が1回転するコードを使ってtransitonを理解を深める

【transitionプロパティ】
遷移 (transition) によって、要素の2つの状態間の変化を定義することができます。それぞれの状態は :hover や :active のような疑似クラスで定義するか、 JavaScript を使用して動的に設定します。

参考：transform - CSS: カスケーディングスタイルシート | MDN

引数の説明

See the Pen yLgNawz by shimoda tenta (@kokekoke) on CodePen.

引数1：　アニメーションさせるプロパティを指定

• none：　全てアニメーションさせない
• all：　全てアニメーションさせる
• CSSプロパティ：　アニメーションさせたCSSプロパティを指定
  • アニメーション可能な CSS プロパティ - CSS: カスケーディングスタイルシート | MDN

参考：　transition-property - CSS: カスケーディングスタイルシート | MDN

引数2：　何秒かけてアニメーションさせるかを指定

• (n)s：　(n)sかけてアニメーション
• (n)ms：　(n)msかけてアニメーション

参考：transition-duration - CSS: カスケーディングスタイルシート | MDN

参考：<time> - CSS: カスケーディングスタイルシート | MDN

引数3：　アニメーションの加速曲線を指定

※長くなりそうなので別途記事作成中※

引数4：　変化が始まるまでの待ち時間を指定

• (n)s：　(n)s後にアニメーション開始
• (n)ms：　(n)ms後にアニメーション開始

併せてマイナス値にすると、アニメーションが即座に始まり、指定した秒数だけアニメーションを飛ばして途中からアニメーションが始まる

See the Pen
GRrJNdr by shimoda tenta (@kokekoke)
on CodePen.

参考：transition-delay - CSS: カスケーディングスタイルシート | MDN

その他：　CSSプロパティの複数指定もできる

引数を「,」で区切ることによって複数のCSSプロパティにそれぞれのtransitionを設定できる

See the Pen ホバーしたら画像が1回転するコードを使ってtransitonの理解を深める①　複数指定の説明 by shimoda tenta (@kokekoke) on CodePen.