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

CSS3の@keyframesで左から要素をスライドインさせるアニメーションの実装方法

CSS3の@keyframesルールを使用すると、要素を左方向へスライドさせながら表示するアニメーションを簡単に作成できます。この記事では、テキストが画面の右側から左側へ移動しながら登場する「スライドイン」アニメーションの実装例を紹介します。

キーフレームアニメーションの基本

@keyframesは、アニメーションの開始点（from）から終了点（to）までの中間状態を定義するためのCSS機能です。途中にパーセンテージ（例：75%）を指定することで、複数段階の変化も表現できます。

以下のサンプルコードでは、見出し（h1要素）に対してslideinという名前のアニメーションを適用しています。ブラウザの互換性を考慮し、Firefox向けの-moz-プレフィックスとWebKit系ブラウザ（Chrome、Safariなど）向けの-webkit-プレフィックスの両方を記述しています。

サンプルコード

<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%
            }
            75% {
               font-size:300%;
               margin-left:25%;
               width:150%;
            }
            to {
               margin-left:0%;
               width:100%;
            }
         }
         @-webkit-keyframes slidein {
            from {
               margin-left:100%;
               width:300%
            }
            75% {
               font-size:300%;
               margin-left:25%;
               width:150%;
            }
            to {
               margin-left:0%;
               width:100%;
            }
         }
      </style>
   </head>
   <body>
      <h1>Tutorials Point</h1>
      <p>これは中間キーフレームで文字サイズを変化させる、左方向アニメーションのサンプルです。</p>
      <button onclick = "myFunction()">ページを再読み込み</button>
      <script>
         function myFunction() {
            location.reload();
         }
    </script>
   </body>

コードの解説

アニメーションの流れ

  • from（開始時）： 要素は左マージン100%（画面の右端の外側）、幅300%の状態からスタートします。
  • 75%地点： フォントサイズが300%に拡大され、左マージンは25%、幅は150%まで縮小します。ここで文字が一瞬大きく見える演出が加わります。
  • to（終了時）： 左マージン0%、幅100%となり、要素が画面の左端に収まってアニメーションが完了します。

主要プロパティの説明

  • animation-duration: アニメーションが完了までにかかる時間を指定します（この例では3秒）。
  • animation-name: 適用する@keyframesルールの名前を指定します。

ボタンをクリックしてページを再読み込みすると、アニメーションを何度でも確認できます。実際にブラウザで動かしてみると、テキストが右から左へスライドしながら、途中でフォントサイズが変化する様子がわかります。

補足：モダンブラウザでの記述について

現在の主要ブラウザではベンダープレフィックスなしの標準的な@keyframesとanimationプロパティがサポートされているため、新しいプロジェクトでは以下のように簡潔に書くことができます。

h1 {
   animation-duration: 3s;
   animation-name: slidein;
}

ただし、古いブラウザへの対応が必要な場合は、プレフィックス付きの記述を併用すると安心です。

  1. 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;

  2. CSS3でキーフレームアニメーションを定義する方法

    CSS3でキーフレームアニメーションを作成するには、個々のキーフレームを定義します。キーフレームとは、アニメーションの途中の状態（中間ステップ）を制御するための仕組みです。開始時点と終了時点のスタイルを指定することで、その間の変化をブラウザが自動的に補間してくれます。以下に、CSS3でキーフレームを定義するコード例を示します。コード例<!DOCTYPE html> <html> <head> <style> body { font-family: Segoe UI, Tahoma, Geneva, Verdana, sans-serif;