CSSアニメーション例
奇数行と偶数行が左右反対に動く

※ネコブレイバーはマッハドッターbraveさんの作品です。

CSSアニメーション例

アニメーション概要

奇数行と偶数行で左右に動くタイミングを反対にしています（leftで処理）。

HTMLコーディングの概要はこちら。

CSS

.dots {
  float: left;
  width: 5%;
  padding-top: 5%;
  position: relative;
}


@keyframes left-to-right {
  0% {
    left: 0px;
  }
  25% {
    left: -30px;
  }
  50% {
    left: 0px;
  }
  75% {
    left: 30px;
  }
  100% {
    left: 0px;
  }
}

.r1, .r3, .r5, .r7, .r9, .r11, .r13, .r15, .r17, .r19 {
  animation-name: left-to-right;
  animation-duration: 5s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
}


@keyframes right-to-left {

0% {
left: 0px;
}

25% {
left: 30px;
}

50% {
left: 0px;
}

75% {
left: -30px;
}

100% {
left: 0px;
}

}

.r2, .r4, .r6, .r8, .r10, .r12, .r14, .r16, .r18, .r20 {
  animation-name: right-to-left;
  animation-duration: 5s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
}