【スライドアニメーション】CSSのみ

はじめに

概要

この記事では、CSSのみでスライドアニメーションを実装する方法について解説します。具体的な実装方法を、コードスニペットを用いて紹介します。CSSのtransitionやtransform、keyframesプロパティを利用したアニメーションの作成方法を詳しく見ていきましょう。CSSのみで実装することで、パフォーマンスの向上が期待できます。

読者

スライドアニメーションCSSのみは、最初にどこを理解するとよいですか？

木村

どの要素を基準にするか、どの状態で見た目を変えるか、画面幅が変わっても崩れないかを順番に確認することが大切です。

読者

実際に試すときは、手順だけでなく確認方法も知っておいた方がよいでしょうか？

木村

はい。この記事では、作業の目的から実装後の確認までを順番に整理します。自分の環境と照らし合わせながら読み進めてください。

※本記事の情報は執筆時点のものであり、閲覧時点では変更されている可能性があります。また、ご利用の環境によっては、本記事の内容が正常に動作しないことがあります。最新の情報については、公式サイトなどでご確認ください。

実装内容

実装内容では、【スライドアニメーション】CSSのみを理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。

パターン1

パターン2

コード

コードでは、【スライドアニメーション】CSSのみを理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。

GitHub

上記の実装はこちらからダウロード可能です。

HTML

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css" />
  <link rel="stylesheet" href="/style.css">
  <style>
    @keyframes infinity-scroll-left {
      0% {
        transform: translateX(100%);
      }

      to {
        transform: translateX(0);
      }
    }

    .wp-img-box,
    .wp-img-wrap {
      display: flex;
      width: 100vw;
      height: 150px;
      overflow: hidden;
      justify-content: center;
    }

    .flex-row {
      display: flex;
    }

    .wp-img-box img,
    .wp-img-wrap div {
      animation: infinity-scroll-left 60s linear 0s infinite both;
      height: auto;
      max-width: none;
    }
  </style>
</head>

<body>
  <div class="wp-img-box">
    <img src="/illust_01.webp" alt="">
    <img src="/illust_01.webp" alt="">
    <img src="/illust_01.webp" alt="">
  </div><!-- /.img-box -->

  <div class="wp-img-wrap">
    <div class="flex-row">
      <img src="https://picsum.photos/500/200?random=1" alt="">
      <img src="https://picsum.photos/500/200?random=2" alt="">
      <img src="https://picsum.photos/500/200?random=3" alt="">
      <img src="https://picsum.photos/500/200?random=4" alt="">
      <img src="https://picsum.photos/500/200?random=5" alt="">
      <img src="https://picsum.photos/500/200?random=6" alt="">
      <img src="https://picsum.photos/500/200?random=7" alt="">
      <img src="https://picsum.photos/500/200?random=8" alt="">
      <img src="https://picsum.photos/500/200?random=9" alt="">
      <img src="https://picsum.photos/500/200?random=10" alt="">
    </div><!-- /.box -->
    <div class="flex-row">
      <img src="https://picsum.photos/500/200?random=1" alt="">
      <img src="https://picsum.photos/500/200?random=2" alt="">
      <img src="https://picsum.photos/500/200?random=3" alt="">
      <img src="https://picsum.photos/500/200?random=4" alt="">
      <img src="https://picsum.photos/500/200?random=5" alt="">
      <img src="https://picsum.photos/500/200?random=6" alt="">
      <img src="https://picsum.photos/500/200?random=7" alt="">
      <img src="https://picsum.photos/500/200?random=8" alt="">
      <img src="https://picsum.photos/500/200?random=9" alt="">
      <img src="https://picsum.photos/500/200?random=10" alt="">

    </div><!-- /.box -->
    <div class="flex-row">
      <img src="https://picsum.photos/500/200?random=1" alt="">
      <img src="https://picsum.photos/500/200?random=2" alt="">
      <img src="https://picsum.photos/500/200?random=3" alt="">
      <img src="https://picsum.photos/500/200?random=4" alt="">
      <img src="https://picsum.photos/500/200?random=5" alt="">
      <img src="https://picsum.photos/500/200?random=6" alt="">
      <img src="https://picsum.photos/500/200?random=7" alt="">
      <img src="https://picsum.photos/500/200?random=8" alt="">
      <img src="https://picsum.photos/500/200?random=9" alt="">
      <img src="https://picsum.photos/500/200?random=10" alt="">
    </div><!-- /.box -->
  </div><!-- /.img-box -->
</body>

</html>

画像はGitHubからダウンロードできます。パターン2の画像はこちらの自動画像生成サイトを使用しております。

解説

keyframes

@keyframes infinity-scroll-left {
  0% {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0);
  }
}

infinity-scroll-left アニメーションの説明

@keyframesルールはCSSアニメーションのキーフレームを定義します。キーフレームはアニメーションの開始から終了までのステップを指定し、アニメーションの各ステップでどのようなスタイルを適用するかを決めます。

@keyframes infinity-scroll-leftは、要素が右端から左端に移動するアニメーションを定義しています。具体的には、次のような動きを行います。

0% キーフレーム　0% { transform: translateX(100%); }
- アニメーションの最初の状態を定義しています。
- transform: translateX(100%);は、要素をその幅の100%分右に移動させます。つまり、要素は完全に画面の右側に配置されます。
to キーフレーム　to { transform: translateX(0); }
- アニメーションの最終状態を定義しています。
- transform: translateX(0);は、要素を元の位置に戻します。つまり、要素は画面の左端に配置されます。

CSS

animationプロパティの実装

.wp-img-box img,
.wp-img-wrap div {
  animation: infinity-scroll-left 60s linear 0s infinite both;
  height: auto;
  max-width: none;
}

クラスの解説

.wp-img-box img は、class 属性が wp-img-box の要素内にあるすべての img 要素を指します。
.wp-img-wrap div は、class 属性が wp-img-wrap の要素内にあるすべての div 要素を指します。

このセレクタは、指定された img 要素と div 要素にスタイルとアニメーションを適用します。

アニメーションのプロパティ

animation プロパティは、アニメーションの設定を一括で行います。
infinity-scroll-left は、適用するアニメーションの名前です（先に説明した@keyframes infinity-scroll-left）。
60s は、アニメーションの持続時間です。アニメーションが1回完了するまでに60秒かかります。
linear は、アニメーションのタイミング関数です。アニメーションが一定の速度で進行します。
0s は、アニメーションの遅延時間です。ここでは遅延なし（0秒）を指定しています。
infinite は、アニメーションの繰り返し回数です。無限に繰り返されます。
both は、アニメーションの適用範囲です。アニメーションの前後で、開始時点と終了時点のスタイルが適用されます。

高さと幅のプロパティ

height: auto;
- 画像や要素の高さを自動調整します。要素のコンテンツに応じて高さが決まります。
max-width: none;
- 要素の最大幅を無制限に設定します。要素がその親要素の幅に制約されず、元のサイズのままで表示されます。

まとめ

CSSのみで実装が可能
パフォーマンスの向上が期待できる
アニメーションプロパティの理解が必要
コードはGitHubからもダウンロード可能

【スライドアニメーション】CSSのみ

目次

実装内容

パターン1

パターン2

コード

GitHub

HTML

解説

keyframes

infinity-scroll-left アニメーションの説明

CSS

animationプロパティの実装

クラスの解説

アニメーションのプロパティ

高さと幅のプロパティ

まとめ

コメント（0件）

会員ログイン後にコメントできます

目次

実装内容

パターン1

パターン2

コード

GitHub

HTML

解説

keyframes

infinity-scroll-left アニメーションの説明

CSS

animationプロパティの実装

クラスの解説

アニメーションのプロパティ

高さと幅のプロパティ

まとめ

関連する記事

【one div loaders】便利なローディングアニメーション

Zoom-inアニメーションの実装CSSアニメーションプロパティ

【コピペで実装】回転するテキスト

会員ログイン後にコメントできます