【CSS解説】テキストや画像の無限ループアニメーション

2024年8月6日2024年8月27日

misa

こんにちは、ウェブデザインパレットのmisaです。

今回は、CSSのanimationプロパティで、テキストや画像を無限ループさせる方法について解説していきます。

Contents

テキストの無限ループ

Web Design Pallet Web Design Pallet

HTML

<div class="wrapper">
  <p class="loop_text">Web Design Pallet Web Design Pallet</p>
  <p class="loop_text">Web Design Pallet Web Design Pallet</p>
</div>

CSS

.wrapper {
  display: flex;
  width: 100%;
  overflow: hidden;
}

.loop_text {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 80px;
  overflow: hidden;
  padding-left: 20px;
  color: #ffa07a;
  }

.loop_text:nth-child(odd) {
  animation: loop 50s -25s linear infinite;
}

.loop_text:nth-child(even) {
  animation: loop2 50s linear infinite;
}

@keyframes loop {
    0% {
      transform: translateX(100%);
    }
    to {
      transform: translateX(-100%);
    }
}

@keyframes loop2 {
    0% {
      transform: translateX(0);
    }
    to {
      transform: translateX(-200%);
    }
}

画像の無限ループ

HTML

<div class="image_wrapper">
  <img src="image.jpg" class="loop_image">
  <img src="image.jpg" class="loop_image">
</div>

CSS

.image_wrapper {
  display: flex;
  height: 200px;
  overflow: hidden;
}

.loop_image {
    width: auto;
    height: 100%;
    max-width: none;
}

.loop_image:nth-child(odd) {
  animation: loop3 80s -40s linear infinite;
}

.loop_image:nth-child(even) {
  animation: loop4 80s linear infinite;
}

@keyframes loop3 {
    0% {
      transform: translateX(100%);
    }
    to {
      transform: translateX(-100%);
    }
}

@keyframes loop4 {
    0% {
      transform: translateX(0);
    }
    to {
      transform: translateX(-200%);
    }
}