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

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


>【transitionプロパティ】
>遷移 (transition) によって、要素の2つの状態間の変化を定義することができます。それぞれの状態は :hover や :active のような疑似クラスで定義するか、 JavaScript を使用して動的に設定します。
>
>[参考：transform - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/transform)






# 引数の説明

<p class="codepen" data-height="448" data-theme-id="dark" data-default-tab="css,result" data-user="kokekoke" data-slug-hash="yLgNawz" style="height: 448px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="yLgNawz">
  <span>See the Pen <a href="https://codepen.io/kokekoke/pen/yLgNawz">
  yLgNawz</a> by shimoda tenta (<a href="https://codepen.io/kokekoke">@kokekoke</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>





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

- none：　全てアニメーションさせない
- all：　全てアニメーションさせる
- CSSプロパティ：　アニメーションさせたCSSプロパティを指定
    - [アニメーション可能な CSS プロパティ - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_animated_properties)

[参考：　transition-property - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/transition-property)





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

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

[参考：transition-duration - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/transition-duration)

 [参考：\<time> - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/time)




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

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






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

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

併せてマイナス値にすると、アニメーションが即座に始まり、指定した秒数だけアニメーションを飛ばして途中からアニメーションが始まる
<p class="codepen" data-height="464" data-theme-id="dark" data-default-tab="css,result" data-user="kokekoke" data-slug-hash="GRrJNdr" style="height: 464px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="GRrJNdr">
  <span>See the Pen <a href="https://codepen.io/kokekoke/pen/GRrJNdr">
  GRrJNdr</a> by shimoda tenta (<a href="https://codepen.io/kokekoke">@kokekoke</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


[参考：transition-delay - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/transition-delay)





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

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

<p class="codepen" data-height="541" data-theme-id="dark" data-default-tab="css,result" data-user="kokekoke" data-slug-hash="zYNGoaQ" style="height: 541px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="ホバーしたら画像が1回転するコードを使ってtransitonの理解を深める①　複数指定の説明">
  <span>See the Pen <a href="https://codepen.io/kokekoke/pen/zYNGoaQ">
  ホバーしたら画像が1回転するコードを使ってtransitonの理解を深める①　複数指定の説明</a> by shimoda tenta (<a href="https://codepen.io/kokekoke">@kokekoke</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>