cssのtransitionとtransformで鬼ハマリしたのでメモ

cssのtransitionとtransformで鬼ハマリしたのでメモしておきます。

transitionとtransformプロパティの概要

transitionプロパティの概要

transitonプロパティの単純な書き方例は以下になります

#delay {
  font-size: 14px;
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
}
#delay:hover {
  font-size: 36px;
}

それからこういうような書き方もできます

div {
    transition: <property> <duration> <timing-function> <delay>;
}

transtion系のプロパティの概要は次のとおりです。

  • transition; trasition系のプロパティをまとめて指定
  • transition-property: transtion効果を敵よ言うするCSSプロパティ名を指定する。カンマ区切りでいくつでも。
  • transiton-duration; 変化に掛かる時間を指定する。初期値は0
  • transition-timing-function: 変化のタイミング・進行割合を指定する
  • transition-delay: 変化がいつ始まるかを指定。初期値は0

このようにプロパティを個々で指定できますが、実際はtransitionプロパティでまとめて指定することが多いかと思います。

transformプロパティの概要

transformプロパティの単純な例としては以下のような書き方です。

transform: translatex(10px);

transformプロパティで指定できる値にはtranslate(移動)以外にも様々あります。

  • translate(X方向の移動距離, Y方向の移動距離)
  • translateX(X方向の移動距離)
  • translateY(Y方向の移動距離)
  • translateZ(Z方向の移動距離)
  • translate3d(X方向の移動距離, Y方向の移動距離, Z方向の移動距離)
  • scale(X方向の縮尺比率, Y方向の縮尺比率)
  • scaleX(X方向の縮尺比率)
  • scaleY(Y方向の縮尺比率)
  • scaleZ(Z方向の縮尺比率)
  • scale3d(X方向の縮尺比率, Y方向の縮尺比率, Z方向の縮尺比率)
  • rotate(回転角度)
  • rotate3d(数値, 数値, 数値, 回転角度)
  • rotateX(X軸を軸とする回転角度)
  • rotateY(Y軸を軸とする回転角度)
  • rotateZ(Z軸を軸とする回転角度)
  • skew(X軸の傾斜角度, Y軸の傾斜角度)
  • skewX(X軸の傾斜角度)
  • skewY(Y軸の傾斜角度)
ここで注意したいのはそれぞれの値の単位です。traslateにはpxで指定します。scaleには数値だけでokです。rotateとskewにはdegという単位を指定します。degは角度です。

transitionとtransformのハマリポイント

ここでは筆者が実際に体験したハマリポイントを書いておきます。

ハマリポイント1: リンクとリンクホバーどっちにtransitionを書けばいい?

答えとしては通常のリンクにtransitionプロパティを書くようにします。どうなるか書いておきます。

  • リンクにtransitionを設定した場合 → マウスホバー時、マウスアウト時両方に効果が反映されます
  • :hoverにtransitionを設定した場合 → マウスホバー時は効果がつきますが、マウスアウト時は効果がつきません。

こういうことがあるので、よっぽどでもないかぎりは通常のリンクにtransitionを書くようにします。

a{
    transition: background 0.5s, transform 0.5s !important;
}
a:hover{
    background: #ff9d9d;
    transform: translatey(4px);
}

ハマりポイント2: 要素移動のアニメはpositionではなくtransformを使う

私ははじめpositionプロパティで移動アニメーションを作成しようとしていました。

たとえば以下のような書き方では動かないわけですね。

a{
transiton: top 2s;
}

なので要素移動のcssアニメをやりたい場合はpositionではなくtransformのtranslateを使って行うようにします。

まとめ

transformとtransitionは個人的にあまりつかわないので、いざつかおうとするとはまってしまいました。ブログに書き出してみると以外に整理できた気がします。参考サイトは以下になります。


Warning: Undefined array key "thumbnail_url" in /home/users/1/boy.jp-rolpop/web/skc/wp-content/themes/godios/inc/schema-org.php on line 49

Warning: Undefined array key "thumbnail_url" in /home/users/1/boy.jp-rolpop/web/skc/wp-content/themes/godios/inc/schema-org.php on line 78