Web活のロゴ

Web制作Output&初心者のための徹底ガイド

お問い合わせ

注目のタグ

#VsCode#Scss#Gsap#Pug#Swiper#ChatGTP
    TOP>CSS>【スライドアニメーション】CSSのみ

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

2024.06.15
はじめに
概要

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

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

実装内容

パターン1

パターン2

コード

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は、要素が右端から左端に移動するアニメーションを定義しています。具体的には、次のような動きを行います。

  1. 0% キーフレーム　0% { transform: translateX(100%); }
    • アニメーションの最初の状態を定義しています。
    • transform: translateX(100%);は、要素をその幅の100%分右に移動させます。つまり、要素は完全に画面の右側に配置されます。
  2. 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アニメーション 様々なデザインの実装<br>–おしゃれなボックス– #4
ウェブ制作において活用できるスタイリッシュなデザインを実装します。今回はボックスのアニメーションに焦点を当てます。ボックスの円をうねるように表現した…
アコーディオンメニューの実装
一般的なウェブサイトでよく見かけるアコーディオンメニューを制作します。ウェブサイト内のQ&Aセクションなどでよく使用される、情報をアコーディオン形式で表…
【コピペで実装】回転するテキスト
回転するテキストを実装する際には、JavascriptやScssのfor文を使用して簡単にアニメーション効果を追加できます。テキストの回転はウェブサイトやアプリケーシ…
デザインの微調整に便利なプロパティ<br>overflow-x: scroll並びにletter-spacingの活用
ウェブ制作では、様々なデバイスに対応するために、レスポンシブ対応で調整します。テキストが一部だけ長くなり、そのために全体的なデザイン崩れが発生するこ…
Copyright
© 2023 Souichi_Kimura All Rights Reserved.