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は個人的にあまりつかわないので、いざつかおうとするとはまってしまいました。ブログに書き出してみると以外に整理できた気がします。参考サイトは以下になります。
コメント