アシアル情報教育研究所ブログ

2024年2月7日 / 最終更新日 : 2024年2月7日アシアル情報教育研究所アシアル情報教育研究所ブログ

CSSで画像をアニメーションさせてみよう(3)動きの速度を変える

普段利用しているウェブサイトやSNSでは、目を引く視覚効果、滑らかなアニメーションがふんだんに用いられています。
CSSを使うと、静止画像を、簡単なアニメーションに仕立て上げることができます。

この記事では、CSSの設定を変えて、自動で作られるアニメーションの動作（速度）を変えてみます。

サンプルの確認

以下で、サンプルの動作を確認することができます。

じっくり見比べてみてください。サンプルでは、同じ画像が、４つ、同じ幅で左右に移動するようにアニメーション表示されます。

違うのは動作の速さの変化です。

１つ目：「最初はゆっくり動き始めるが、途中速く。最後はまたゆっくり」

２つ目：「動作の最初から最後まで、同じ速さで動く」

３つ目：「最初は遅く。後から速く」

４つ目：「最初は速く。後からゆっくり」

アプリとソースコードのインポート

以下のボタンをクリックすると、Monaca Educationにプロジェクトをインポートできます。

Monaca Educationにインポートする(要ログイン)

CSSのポイント：キーフレームの定義

CSSでアニメーションを作るには、まず、キーフレームを定義します。


@keyframes animateImageSlide {
    /* 開始時点 */
    0% {
        transform: translateX(0);
    }
    /* 中間1 */
    25% {
        transform: translateX(100px);
    }
    /* 中間2 */
    50% {
        transform: translateX(0);
    }
    /* 中間3 */
    75% {
        transform: translateX(-100px);
    }
    /* 終了時点 */
    100% {
        transform: translateX(0);
    }
}

アニメーションの動作は4種類ありますが、キーフレームは１つだけです。

詳細はこのあと説明しますが、先にヒントを示すと、「Webブラウザが計算して作り出す、フレームとフレームの間の動きの速さ」は、キーフレームの外の設定で変更するのです。同じキーフレームでも、違う設定をすることにより、動作を変えられます。

キーフレームの指定

定義したキーフレームを、HTMLの中の特定の要素の表示のスタイルに指定することで、アニメーションするようになります。

以下のコードでは、HTMLの中のID属性がimg1である要素に、キーフレームanimateImageSlideを指定しています。


#img1 {
    width: 100px;
    /* 画像にアニメーションを適用。easeで、ゆっくり-速く-ゆっくり */
    animation: animateImageSlide 10s infinite ease;
}

属性animationのオプション

HTMLの中の特定の要素に、キーフレームを指定する際、オプションを指定することで、アニメの動作の詳細を変えることができます。

１つ目の画像を表示するに当たって、次のようにCSSを指定しています。


#img1 {
    width: 100px;
    /* 画像にアニメーションを適用。easeで、ゆっくり-速く-ゆっくり */
    animation: animateImageSlide 10s infinite ease;
}

属性animationの最後に、”ease”という指定があります。これにより、「最初はゆっくり動き始めるが、途中速く。最後はまたゆっくり」という動作を実現しています。

２つ目の画像を表示するに当たって、次のようにCSSを指定しています。


#img2 {
    width: 100px;
    /* 画像にアニメーションを適用。linearで、いつも同じ速さ */
    animation: animateImageSlide 10s infinite linear;
}

属性animationの最後に、”linear”という指定があります。これにより、「動作の最初から最後まで、同じ速さで動く」という動作を実現しています。

３つ目の画像を表示するに当たって、次のようにCSSを指定しています。


#img3 {
    width: 100px;
    /* 画像にアニメーションを適用。ease-inで、最初遅く、後で速く */
    animation: animateImageSlide 10s infinite ease-in;
}

属性animationの最後に、”ease-in”という指定があります。これにより、「最初は遅く。後から速く」という動作を実現しています。

４つ目の画像を表示するに当たって、次のようにCSSを指定しています。


#img4 {
    width: 100px;
    /* 画像にアニメーションを適用。ease-outで、最初速く、後で遅く */
    animation: animateImageSlide 10s infinite ease-out;
}

属性animationの最後に、”ease-out”という指定があります。これにより、「最初は速く。後からゆっくり」という動作を実現しています。

その他のさまざまなオプション

次のリンク先のページには、属性animationに指定できるさまざまなオプションが、動作のサンプルとともに紹介されています。

https://developer.mozilla.org/ja/docs/Web/CSS/animation

アニメーションの動作が始まるまで、少し時間を空けたり、アニメ表示の前後のスタイルを決めたりすることができます。