CSSアニメーション例
上から降ってくる

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

CSSアニメーション例

アニメーション概要

topの値がマイナスから0になることで、上から定位置に振ってくる（戻ってくる）仕掛です。順番に積み重なるようにするため、各行でtopの値が0になるタイミングをずらしています。

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

CSS

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


@keyframes fall-20 {
  0% {
    top: -1000px;
  }
  4% {
    top: 0px;
  }
  100% {
    top: 0px;
  }
}

.r20 {
  animation-name: fall-20;
  animation-duration: 6s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}


@keyframes fall-19 {
  0% {
    top: -1000px;
  }
  8% {
    top: 0px;
  }
  100% {
    top: 0px;
  }
}

.r19 {
  animation-name: fall-19;
  animation-duration: 6s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}


@keyframes fall-18 {
  0% {
    top: -1000px;
  }
  12% {
    top: 0px;
  }
  100% {
    top: 0px;
  }
}

.r18 {
  animation-name: fall-18;
  animation-duration: 6s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}


@keyframes fall-17 {
  0% {
    top: -1000px;
  }
  16% {
    top: 0px;
  }
  100% {
    top: 0px;
  }
}

.r17 {
  animation-name: fall-17;
  animation-duration: 6s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}


@keyframes fall-16 {
  0% {
    top: -1000px;
  }
  20% {
    top: 0px;
  }
  100% {
    top: 0px;
  }
}

.r16 {
  animation-name: fall-16;
  animation-duration: 6s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}


@keyframes fall-15 {
  0% {
    top: -1000px;
  }
  24% {
    top: 0px;
  }
  100% {
    top: 0px;
  }
}

.r15 {
  animation-name: fall-15;
  animation-duration: 6s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}


@keyframes fall-14 {
  0% {
    top: -1000px;
  }
  28% {
    top: 0px;
  }
  100% {
    top: 0px;
  }
}

.r14 {
  animation-name: fall-14;
  animation-duration: 6s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}


@keyframes fall-13 {
  0% {
    top: -1000px;
  }
  32% {
    top: 0px;
  }
  100% {
    top: 0px;
  }
}

.r13 {
  animation-name: fall-13;
  animation-duration: 6s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}


@keyframes fall-12 {
  0% {
    top: -1000px;
  }
  36% {
    top: 0px;
  }
  100% {
    top: 0px;
  }
}

.r12 {
  animation-name: fall-12;
  animation-duration: 6s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}


@keyframes fall-11 {
  0% {
    top: -1000px;
  }
  40% {
    top: 0px;
  }
  100% {
    top: 0px;
  }
}

.r11 {
  animation-name: fall-11;
  animation-duration: 6s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}


@keyframes fall-10 {
  0% {
    top: -1000px;
  }
  44% {
    top: 0px;
  }
  100% {
    top: 0px;
  }
}

.r10 {
  animation-name: fall-10;
  animation-duration: 6s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}


@keyframes fall-9 {
  0% {
    top: -1000px;
  }
  48% {
    top: 0px;
  }
  100% {
    top: 0px;
  }
}

.r9 {
  animation-name: fall-9;
  animation-duration: 6s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}


@keyframes fall-8 {
  0% {
    top: -1000px;
  }
  52% {
    top: 0px;
  }
  100% {
    top: 0px;
  }
}

.r8 {
  animation-name: fall-8;
  animation-duration: 6s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}


@keyframes fall-7 {
  0% {
    top: -1000px;
  }
  56% {
    top: 0px;
  }
  100% {
    top: 0px;
  }
}

.r7 {
  animation-name: fall-7;
  animation-duration: 6s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}


@keyframes fall-6 {
  0% {
    top: -1000px;
  }
  60% {
    top: 0px;
  }
  100% {
    top: 0px;
  }
}

.r6 {
  animation-name: fall-6;
  animation-duration: 6s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}


@keyframes fall-5 {
  0% {
    top: -1000px;
  }
  64% {
    top: 0px;
  }
  100% {
    top: 0px;
  }
}

.r5 {
  animation-name: fall-5;
  animation-duration: 6s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}


@keyframes fall-4 {
  0% {
    top: -1000px;
  }
  68% {
    top: 0px;
  }
  100% {
    top: 0px;
  }
}

.r4 {
  animation-name: fall-4;
  animation-duration: 6s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}


@keyframes fall-3 {
  0% {
    top: -1000px;
  }
  72% {
    top: 0px;
  }
  100% {
    top: 0px;
  }
}

.r3 {
  animation-name: fall-3;
  animation-duration: 6s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}


@keyframes fall-2 {
  0% {
    top: -1000px;
  }
  76% {
    top: 0px;
  }
  100% {
    top: 0px;
  }
}

.r2 {
  animation-name: fall-2;
  animation-duration: 6s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}


@keyframes fall-1 {
  0% {
    top: -1000px;
  }
  80% {
    top: 0px;
  }
  100% {
    top: 0px;
  }
}

.r1 {
  animation-name: fall-1;
  animation-duration: 6s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}