概要
ホバーしたら数字が1回転するコードを使ってtransitonを理解を深める
【transitionプロパティ】
遷移 (transition) によって、要素の2つの状態間の変化を定義することができます。それぞれの状態は :hover や :active のような疑似クラスで定義するか、 JavaScript を使用して動的に設定します。
引数の説明
See the Pen yLgNawz by shimoda tenta (@kokekoke) on CodePen.
引数1： アニメーションさせるプロパティを指定
- none： 全てアニメーションさせない
- all： 全てアニメーションさせる
- CSSプロパティ： アニメーションさせたCSSプロパティを指定
参考： 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.