CSSアニメーション例
上下ゆらゆらネコブレイバー

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

@keyframes sink {
  0% {
    top: 0px;
  }
  25% {
    top: 8px;
  }
  50% {
    top: 0px;
  }
  75% {
    top: 12px;
  }
  100% {
    top: 0px;
  }
}

.r1, .r2, .r3, .r4, .r5, .r6, .r7, .r8, .r9, .r10, 
.r11, .r12, .r13, .r14, .r15, .r16, .r17, .r18, .r19 {
  animation-name: sink;
  animation-duration: 1.5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

#c14r19, #c15r19, #c16r19 {
  z-index: 1000;
}