CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSアニメーションでtransformプロパティをアニメーション化する方法

CSSを使えば、transform プロパティにも簡単にアニメーションを適用できます。transform をアニメーション化することで、要素の回転・移動・拡大縮小などを滑らかで軽量な演出として表現可能です。ここでは、@keyframes と animation プロパティを組み合わせた基本的な実装方法を解説します。

実装のポイント

  • @keyframes：アニメーションの進行度ごとに適用するスタイル（キーフレーム）を定義します。
  • animation：アニメーション名や再生時間（duration）などをまとめて指定できるショートハンドプロパティです。
  • transform：キーフレーム内で rotate() や translate()、scale() などの変換関数を指定します。

サンプルコード

以下のコードでは、オレンジ色のボックスが3秒間のアニメーションの中で120度回転する例を示しています。実際にブラウザで実行して動作を確認してみてください。

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            margin: auto;
            border: 2px solid blue;
            width: 300px;
            height: 400px;
            background-color: orange;
            animation: myanim 3s;
         }
         @keyframes myanim {
            30% {
               transform: rotate(120deg);
            }
         }
      </style>
   </head>
   <body>
      <div>
         <h1>Demo</h1>
      </div>
   </body>
</html>

コードの解説

@keyframes myanim の中で、アニメーション進行度が30%の時点でのスタイルとして transform: rotate(120deg); を指定しています。この場合、再生時間が3秒なので、開始から約0.9秒後に要素が120度回転した状態になり、その後は元の状態へ戻ります。

また、アニメーション終了時の状態をそのまま保持したい場合は、次のように animation-fill-mode: forwards; を追加すると便利です。

div {
   animation: myanim 3s forwards;
}

このように @keyframes の各キーフレームで transform の値を変化させるだけで、回転だけでなく平行移動やスケール変更など、多彩なアニメーションをJavaScriptなしで実現できます。

  1. CSSアニメーションでtransformプロパティをアニメーション化する方法

    CSSを使えば、transform プロパティにも簡単にアニメーションを適用できます。transform をアニメーション化することで、要素の回転・移動・拡大縮小などを滑らかで軽量な演出として表現可能です。ここでは、@keyframes と animation プロパティを組み合わせた基本的な実装方法を解説します。 実装のポイント @keyframes：アニメーションの進行度ごとに適用するスタイル（キーフレーム）を定義します。 animation：アニメーション名や再生時間（duration）などをまとめて指定できるショートハンドプロパティです。 transform：キーフレーム内で rot

  2. CSSアニメーションでvertical-alignプロパティを動かす方法を解説

    CSSのvertical-alignプロパティは、インライン要素やテーブルセル内のコンテンツの垂直方向の位置を揃えるために使われます。実は、このプロパティもCSSアニメーション（@keyframes）と組み合わせることで、滑らかにアニメーションさせることが可能です。以下のサンプルコードでは、画像のvertical-alignの値を3秒かけて変化させるアニメーションを実装しています。アニメーションの途中（50%の時点）で値が120pxに変化するように設定しています。サンプルコード<!DOCTYPE html> <html>    <head>