CSSによる基本的なアニメーション

このボックスは、左から右へ移動しながら拡大縮小とフェードイン/フェードアウトの効果が実現されています。

ポイント解説

animationプロパティと、@keyframesプロパティが必要になります。

animationプロパティ

• 4s: 1サイクルの時間が4秒（animation-durationプロパティ）
• infinite: 無限ループでアニメーションが続く。
• alternate: アニメーションが往復する（前進→逆再生）。"alternate（オルタネイト）"代わる代わる、の意味
• ease-in-out: 加速と減速を滑らかにするイージング効果。

@keyframes moveBox

• 0%: 初期状態（fromとも書ける）。左端からスタートし、通常のサイズ、半透明。
• 50%: 中間地点。右に200px移動し、サイズを1.2倍に、完全に表示。
• 100%: 終了状態（toとも書ける）。さらに右に400px移動し、元のサイズ、半透明に戻る。

もっと勉強したい方向け

translateプロパティとtransformプロパティ

従来はtransformプロパティを使用するのが一般的でしたが、最新のCSS（最新のブラウザ）では、translateプロパティやScaleプロパティとして要素を分けて記述することが可能です。

    /* これが */
    .box {
      transform: translateX(12px);
      transform: rotate(45deg);
      transform: scale(1.2);
    }
    
    /* こう書ける（同じ意味） */
    .box {
      translate: 12px;
      rotate: 45deg;
      scale: 1.2;
    }

仮に「translateY(12px)」を記述する場合は「translate: 0 12px」とする必要があります。scaleも同様で、X軸Y軸(あるいはZ軸)のみの記述は存在しないため、そういった場合はX軸Y軸の指定を追加しないといけません。

もっと勉強したい方向け https://developer.mozilla.org/ja/docs/Web/CSS/translate

サンプルその2です。テキストが流れてきますね。ここでは、要素の左マージンを 100% (包含要素の右端を示します) に、要素の幅を 300% (包含要素の幅の 3 倍) に設定しています。 これによりアニメーションの始まりの時点では、見出しがブラウザーのウィンドウの右端の外側に描画されます。要素の左マージンを 0% に、幅を 100% に設定しています。 これにより、見出しがコンテンツエリアの左端へすべり込むことでアニメーションが終わります。

イージングについて

• ease：適度な加減速
• linear： 等速
• ease-in : 弱い加速
• ease-out : 弱い減速
• ease-in-out : 弱い加減速

transition-timing-functionプロパティが未指定の場合は、デフォルトのeaseが適用されます。