汎用アニメーション

回転するアニメーション

回転するアニメーションのCSSと実用的な使い方

See the Pen Untitled by チータツ (@cheese_fuji) on CodePen.

順に平面回転(z軸が中心)、横回転(Y軸が中心)、縦回転(X軸が中心)となっています。

CSSの解説

  • @keyframesでアニメーションの動きを作成
    • 回転にはtransform: rotate(角度) を使用する
      • 0%時点ではtransform: rotate(0)で回転なし
      • 100%時点でtransform: rotate(360deg)で1回転した状態
  • 動かしたい要素にクラスを付与
    • クラス内に animation プロパティを記載
      • animation に 動作時間・@keyframesの名前・タイミング・動作回数 を指定する
      • 上記CSSでは「 animation: 3s(3秒) rotation-2d linear(等速) infinite(永続ループ); 」と設定しています

divpなどのブロック要素は全幅(親要素の幅)なので、widthを指定せずに横回転させると回転が大きくなり過ぎてしまいます。display: inlinedisplay:inline-blockでインライン要素にするか、widthで幅を指定するようにしましょう。

応用CSS

アニメーション処理の@keyframesに処理を追記すれば、回転中に様々な変化を付けることができます。

一般的には半回転(180degに到達)したタイミングで処理を施すことが多いと思います。

回転中に色が反転していくアニメーション

0から360deg のy軸回転を作り、半回転したタイミング 50% の時点に色を反転させる処理filter: insert()を追加したものです。

See the Pen 回転途中に色が変わるアニメーション by チータツ (@cheese_fuji) on CodePen.

反転ではなくても、同じ要領でbackgound-colorなどを指定すれば、回転中に色を変えることが可能です。

回転で表・裏がひっくり返るアニメーション

グラデーションを作るのに使われるlinear-gradientは、transitonanimationによる時間変化が効きません。そのため、@keyframesに処理を組み込むと、指定したタイミングでいきなり変化してしまいます。

この性質を利用して半回転するタイミング(50%)にlinear-gradientを追記すれば、回転して表裏がひっくり返ったような演出をすることもできます。

See the Pen Untitled by チータツ (@cheese_fuji) on CodePen.

マウスホバーで超速回転するアニメーション

以下のように回転するアニメーションと:hoverの疑似要素をかけ合わせれば、ホバー時だけアニメーションするようになります。

また、rotate()で回転する角度は360度より大きく設定できるため、極端に角度を大きくして超速回転させることも可能です。

See the Pen Untitled by チータツ (@cheese_fuji) on CodePen.

ちなみに、上の★がanimationの動きで、下の☆がtranformの動きになります。違いは一目瞭然ですね。

  • animationは条件を満たしている間動き続けるアニメーション
  • transitionは一度きりの "遷移"

おすすめの使い方

  • TOPページなどのヘッダー部分
  • オシャレに見せたいファーストビュー