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

CSSで作るロールインアニメーション効果の実装方法

CSSを使えば、JavaScriptに頼らなくても、要素が回転しながら画面内へ滑り込んでくる「ロールイン（rollIn）」アニメーションを簡単に実装できます。ポイントは、@keyframesでアニメーションの始点と終点を定義し、transformプロパティで移動量（translateX）と回転角度（rotate）を組み合わせることです。

ロールインアニメーションの仕組み

ロールイン効果では、アニメーションの開始時点（0%）で要素を画面の左外側（translateX(-100%)）へ移動させ、-120度回転させた状態で不透明度を0にします。終了時点（100%）では元の位置に戻し、回転を解除して完全に表示します。この変化を滑らかにつなげることで、要素がくるっと回りながら登場する演出が生まれます。

実装例

以下のコードをそのままHTMLファイルとして保存し、ブラウザで開くとロールインアニメーションを確認できます。「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: 10s;
            animation-duration: 10s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
         }
         @-webkit-keyframes rollIn {
            0% {
               opacity: 0;
               -webkit-transform: translateX(-100%) rotate(-120deg);
            }
            100% {
               opacity: 1;
               -webkit-transform: translateX(0px) rotate(0deg);
            }
         }
         @keyframes rollIn {
            0% {
               opacity: 0;
               transform: translateX(-100%) rotate(-120deg);
            }
            100% {
               opacity: 1;
               transform: translateX(0px) rotate(0deg);
            }  
         }
         .rollIn {
            -webkit-animation-name: rollIn;
            animation-name: rollIn;
         }
      </style>
   </head>

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

コードのポイント解説

1. アニメーションの基本設定

.animatedクラスでは、animation-durationでアニメーションの長さを10秒に設定しています。また、animation-fill-mode: bothを指定することで、アニメーション開始前から終了後までキーフレームのスタイルが適用されたままになります。-webkit-というベンダープレフィックスを併記しておくと、SafariなどWebKit系ブラウザでも同様に動作します。

2. @keyframesによる動きの定義

@keyframes rollInの中では、0%の時点でopacity: 0・translateX(-100%)・rotate(-120deg)を指定し、100%の時点でopacity: 1・translateX(0px)・rotate(0deg)を指定しています。この2つの状態をブラウザが自動的に補間することで、なめらかな回転移動が実現します。

3. アニメーションの適用方法

.rollInクラスでanimation-name: rollInを指定することで、キーフレームで定義した動きが要素に適用されます。HTML側ではclass="animated rollIn"のように複数のクラスを組み合わせるのが一般的です。用途に応じてanimation-durationの値を短くすれば、より軽快な印象のアニメーションに調整できます。

  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°と段階的に変化