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

CSS3の@keyframesで作る左方向スライドインアニメーションの実装例

CSS3の@keyframesルールを使うと、要素の位置やサイズを時間の経過とともに滑らかに変化させるアニメーションを簡単に実装できます。以下の例では、見出し（h1要素）に対してアニメーション名（name）、再生時間（duration）、そして開始時・終了時のマージンや幅（width）をキーフレーム構文で指定し、要素を画面の右側から左方向へスライドインさせています。

サンプルコード

<html>
   <head>
      <style type = "text/css">
         h1 {
            -moz-animation-duration: 3s;
            -webkit-animation-duration: 3s;
            -moz-animation-name: slidein;
            -webkit-animation-name: slidein;
         }
         @-moz-keyframes slidein {
            from {
               margin-left:100%; width:300%
            }
            to {
               margin-left:0%; width:100%;
            }
         }
         @-webkit-keyframes slidein {
            from {
               margin-left:100%; width:300%
            }
            to {
               margin-left:0%; width:100%;
            }
          }
      </style>
   </head>
   <body>
      <h1>Tutorials Point</h1>
      <p>this is an example of moving left animation .</p>
      <button onclick = "myFunction()">Reload page</button>
      <script> function myFunction() { location.reload(); } </script>
   </body>
</html>

コードのポイント

  • animation-name（slidein）： 適用するアニメーションに「slidein」という名前を付け、後述のキーフレーム定義と紐付けています。
  • animation-duration（3s）： アニメーションが開始から終了までかかる時間を3秒に設定しています。
  • @keyframes の from / to： 「from」でアニメーション開始時の状態（margin-left: 100%、width: 300%）、「to」で終了時の状態（margin-left: 0%、width: 100%）を定義します。これにより、要素は画面右端から左へ移動しながら、徐々に本来の幅へと縮まっていきます。
  • リロードボタン： CSSアニメーションはページ読み込み時に一度だけ再生されるため、ボタンでページを再読み込みすることで何度でも動作を確認できます。

補足：ベンダープレフィックスについて

この例では古いブラウザとの互換性のため、Firefox向けの -moz-、ChromeやSafari向けの -webkit- というベンダープレフィックスを付けています。現在のモダンブラウザでは、標準の @keyframes や animation-name・animation-duration プロパティのみで問題なく動作するため、新規に開発する場合はプレフィックスなしの記述が推奨されます。

  1. CSSのease-inを使ってスロースタートのアニメーションを設定する方法

    CSSでアニメーションに「ゆっくり始まる」動き（スロースタート）を加えたい場合は、animation-timing-function プロパティに ease-in を指定します。ease-in は、アニメーションの開始時に速度が遅く、進行に合わせて徐々に加速していくイージング関数です。 ease-inの指定例 次のサンプルでは、黄色いボックスが左から右へ移動するアニメーションに対して animation-timing-function: ease-in; を適用しています。ボックスは最初ゆっくり動き出し、次第に速くなりながら移動します。 サンプルコード <!DOCTYPE html>

  2. CSS3のbox-sizingプロパティを使ったレイアウト作成方法を解説

    CSS3では、box-sizingプロパティを活用することで、要素の幅や高さの計算方法を柔軟に制御できます。本記事では、border-boxとcontent-boxという2つの主要な値を使ったレイアウトのサンプルコードとその出力結果を紹介します。 サンプルコード <!DOCTYPE html> <html> <head> <style> body{ font-family: Segoe UI, Tahoma, Geneva, Verdana, sans-serif; } .container{ width: 500px;