Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8582

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

$
0
0

概要

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

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

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

引数の説明

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

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

参考: 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.


Viewing all articles
Browse latest Browse all 8582

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>