[css]transitionアニメーションまとめ

最終更新日:2021.10.01 [金] 公開日:2020.06.16 [火] カテゴリー:html・CSS・JS備忘

Pocket
Facebook にシェア
LINEで送る

transitionアニメーションについてまとめました! ちょっとしたボタンのマウスオーバーなど、簡単な部分に使うことも多く、すぐに忘れてしまうので、コピペできるように(備忘)。



transitionプロパティ

transition-propertyアニメーションを適用させるプロパティを使用します。all(全部、初期値)・none(なし)・プロパティ名で設定。
transition-duration変化にかかる時間。
transform-originアニメーションの起点を指定。transform-origin:X方向(leftやrightやcenterや%など),Y方向(topやbottomやcenterや%など);で指定。初期値は50% 50%。
transition-timing-function変化前・変化後の間の動きの速度などの変化(詳細は後述)
.test1の結果(マウスオーバーしたら変化)
test1

transition-timing-functionの設定の詳細

これは設定によっていろんな動きがあります。わかりやすいようにいろいろ設定。 グレー枠内にマウスオーバーすると、同時に動きます。

transition-timing-function:ease;
変化の始まりと終わりが速く動く

transition-timing-function:ease-in;
変化の始まりがゆっくり動く

transition-timing-function:ease-out;
変化の終わりがゆっくり動く

transition-timing-function:ease-in-out;
変化の始まりち終わりがゆっくり動く

transition-timing-function:linear;
ずっと同じスピートで動く

transition-timing-function:cubic-bezier(数値,数値,数値,数値);
カスタム設定

transition-timing-function:steps(数値,start);
開始時点で指定した数値の段階で変化

transition-timing-function:steps(数値,end);
終了時点で変化完了するように指定した数値の段階で変化

transition-timing-function:step-start;
開始時点で変化

transition-timing-function:step-end;
終了時点で変化

最後のtransition-timing-function:cubic-bezierはとても難しいのですが、この設定を視覚的に見ながら設定したいときはブラウザの検証ツールなどがわかりやすいです。
Firefoxだと、右クリック要素の調査、chromeだと検証です。
これだとかなりわかりやすいので、思った動きを作りやすいかと思います。

そして、サンプル通り、少し複雑な動きを加えられます。

transitionをまとめて指定できる

transitionプロパティは一括でまとめて指定できます。

transition: [transition-propertyの内容] [transition-durationの内容] [transition-timing-functionの内容] [transition-delayの内容] といった指示になります。 と言う感じです。 カンマ区切りで複数の指定可能です。

transformのいろいろな動きの設定

translate:移動させる

背景や色、普通のスタイルシート で設定してること以外に、その要素の大きさや角度など、形を変えるプロパティです。 つまり、その名の通り、変形させます。 3D的な移動もあるのですが、これはちょっと難しいので今回は割愛。

transform:translateX();

サンプル:マウスオーバーで動きます↓

transform:translateY();

サンプル:マウスオーバーで動きます↓

transform:translate();

サンプル:マウスオーバーで動きます↓

rorate:回転させる

サンプル:マウスオーバーで動きます↓

scale:サイズ変更

scaleX

サンプル:マウスオーバーで動きます↓

scaleY

サンプル:マウスオーバーで動きます↓

scale

サンプル:マウスオーバーで動きます↓

skew:傾斜

skewX

サンプル:マウスオーバーで動きます↓

skewY

サンプル:マウスオーバーで動きます↓

skew

サンプル:マウスオーバーで動きます↓

transformは複数まとめて指定できる:順番によって動きは変わる!

box11とbox12はtransformで指定する順番が違うだけですが。動きが異なります。 サンプル:マウスオーバーで動きます↓
サンプル:マウスオーバーで動きます↓

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA