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

CSSで実現する「lightSpeedIn」アニメーション効果の作り方

CSSのlightSpeedInは、要素が画面の右側から高速で飛び込んでくるように見せるアニメーション効果です。translateX()による水平移動と、skewX()による傾きを組み合わせることで、光のようなスピード感あふれるダイナミックな演出を実現できます。

アニメーションの仕組み

このエフェクトは、キーフレーム（@keyframes）を使って各段階の状態を定義しています。ポイントは以下の通りです。

  • 0%（開始時）： 要素を画面外の右側（translateX(100%)）に配置し、-30度傾けた状態で完全に透明（opacity: 0）にします。
  • 60%： 要素が左へ移動して不透明になり、少し行き過ぎてから戻るような勢いのある動きを作ります。
  • 80%〜100%： 傾きが徐々に解消され、最終的に元の位置・角度で自然に静止します。

また、-webkit-プレフィックス付きの記述も併せて用意することで、SafariなどWebKit系ブラウザでも確実に動作するようになっています。

サンプルコード

以下のコードをそのままHTMLファイルに保存してブラウザで開くと、lightSpeedInアニメーションを確認できます。「Reload page」ボタンをクリックするとページが再読み込みされ、アニメーションを何度でも再生できます。

<html>
   <head>
      <style>
         .animated {
            background-image: url(/css/images/logo.png);
            background-repeat: no-repeat;
            background-position: left top;
            padding-top:95px;
            margin-bottom:60px;
            -webkit-animation-duration: 1s;
            animation-duration: 1s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
         }
         @-webkit-keyframes lightSpeedIn {
            0% {
              -webkit-transform: translateX(100%) skewX(-30deg);
              opacity: 0;
            }
            60% {
               -webkit-transform: translateX(-20%) skewX(30deg);
               opacity: 1;
            }
            80% {
               -webkit-transform: translateX(0%) skewX(-15deg);
               opacity: 1;
            }
            100% {
               -webkit-transform: translateX(0%) skewX(0deg);
               opacity: 1;
            }
         }

         @keyframes lightSpeedIn {
            0% {
               transform: translateX(100%) skewX(-30deg);
               opacity: 0;
            }
            60% {
               transform: translateX(-20%) skewX(30deg);
               opacity: 1;
            }
            80% {
               transform: translateX(0%) skewX(-15deg);
               opacity: 1;
            }
            100% {
               transform: translateX(0%) skewX(0deg);
               opacity: 1;
            }
         }

         .lightSpeedIn {
            -webkit-animation-name: lightSpeedIn;
            animation-name: lightSpeedIn;
            -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
         }

         .animated.lightSpeedIn {
            -webkit-animation-duration: 0.5s;
            animation-duration: 0.5s;
         }
      </style>
   </head>

   <body>
      <div id = "animated-example" class = "animated lightSpeedIn"></div>
      <button onclick = "myFunction()">Reload page</button>
      <script>
         function myFunction() {
            location.reload();
         }
      </script>
   </body>
</html>

カスタマイズのヒント

.animated.lightSpeedInでアニメーションの duration を0.5秒に設定しています。この値を変更すれば、表示速度を自由に調整できます。また、animation-timing-function: ease-outにより、終盤にかけて動きが緩やかになるため、高速で飛び込んだ後にスムーズに停止する印象を与えられます。バナーやロゴ、お知らせ要素の登場シーンなど、注目を集めたい箇所でぜひ活用してみてください。

  1. CSSで実現するTada（タダ）アニメーション効果の作り方

    CSSを使えば、要素に「Tada」と呼ばれる揺れるようなアニメーション効果を簡単に追加できます。Tadaアニメーションは、要素が左右に傾きながら拡大・縮小を繰り返すことで、ユーザーの注意を引きつける演出としてよく使われます。ロゴやボタンを目立たせたい場面などに効果的です。以下のコードを実行すると、実際にTadaアニメーションの動作を確認できます。サンプルコード<html>    <head>       <style>          .animated {

  2. CSSで作るスイングアニメーション効果の実装方法

    スイング(Swing)アニメーションは、吊り下げられた要素や軸を中心とした要素を、前後・左右に揺らす動きを表現できるCSSアニメーション効果です。振り子のような自然な揺れを再現でき、ロゴやバナー、アイコンなどに注目を集める演出として活用できます。 スイングアニメーションの仕組み スイングアニメーションは、主に次のCSS機能を組み合わせて実装します。 transform-origin: top center; … 要素の上部中央を回転の基点に設定し、ぶら下がっているように見せる @keyframes と rotate() … 回転角度を15°→ -10°→ 5°→ -5°→ 0°と段階的に変化