CSSアニメーション例
上から降ってきて整列

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

CSSアニメーション例

アニメーション概要

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

一方、左右整列するタイミングは目の行を除き同じなので、同じタイミングでleftを0に戻しています。このとき、パーセントの幅が小さければ、それだけ速く動きます。

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

CSS

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


@keyframes fall-20 {
  0% {
    top: -1000px;
    left: 30px;
  }
  2% {
    top: 0px;
  }
  56% {
    left: 30px;
  }
  58% {
    left: 0px;
  }
  100% {
    top: 0px;
  }
}

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


@keyframes fall-19 {
  0% {
    top: -1000px;
    left: -40px;
  }
  4% {
    top: 0px;
  }
  56% {
    left: -40px;
  }
  58% {
    left: 0px;
  }
  100% {
    top: 0px;
  }
}

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


@keyframes fall-18 {
  0% {
    top: -1000px;
    left: 2px;
  }
  6% {
    top: 0px;
  }
  56% {
    left: 2px;
  }
  58% {
    left: 0px;
  }
  100% {
    top: 0px;
  }
}

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


@keyframes fall-17 {
  0% {
    top: -1000px;
    left: 40px;
  }
  8% {
    top: 0px;
  }
  56% {
    left: 40px;
  }
  58% {
    left: 0px;
  }
  100% {
    top: 0px;
  }
}

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


@keyframes fall-16 {
  0% {
    top: -1000px;
    left: 30px;
  }
  10% {
    top: 0px;
  }
  56% {
    left: 30px;
  }
  58% {
    left: 0px;
  }
  100% {
    top: 0px;
  }
}

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


@keyframes fall-15 {
  0% {
    top: -1000px;
    left: -45px;
  }
  12% {
    top: 0px;
  }
  56% {
    left: -45px;
  }
  58% {
    left: 0px;
  }
  100% {
    top: 0px;
  }
}

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


@keyframes fall-14 {
  0% {
    top: -1000px;
    left: 40px;
  }
  14% {
    top: 0px;
  }
  56% {
    left: 40px;
  }
  58% {
    left: 0px;
  }
  100% {
    top: 0px;
  }
}

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


@keyframes fall-13 {
  0% {
    top: -1000px;
    left: 0px;
  }
  16% {
    top: 0px;
  }
  56% {
    left: 0px;
  }
  58% {
    left: 0px;
  }
  100% {
    top: 0px;
  }
}

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


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

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


@keyframes fall-11 {
  0% {
    top: -1000px;
    left: 20px;
  }
  20% {
    top: 0px;
  }
  56% {
    left: 20px;
  }
  58% {
    left: 0px;
  }
  100% {
    top: 0px;
  }
}

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


@keyframes fall-10 {
  0% {
    top: -1000px;
    left: -30px;
  }
  22% {
    top: 0px;
  }
  56% {
    left: -30px;
  }
  58% {
    left: 0px;
  }
  100% {
    top: 0px;
  }
}

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


@keyframes fall-9 {
  0% {
    top: -1000px;
    left: 80px;
  }
  24% {
    top: 0px;
  }
  70% {
    left: 80px;
  }
  72% {
    left: 0px;
  }
  100% {
    top: 0px;
  }
}

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


@keyframes fall-8 {
  0% {
    top: -1000px;
    left: 20px;
  }
  26% {
    top: 0px;
  }
  56% {
    left: 20px;
  }
  58% {
    left: 0px;
  }
  100% {
    top: 0px;
  }
}

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


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

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


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

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


@keyframes fall-5 {
  0% {
    top: -1000px;
    left: -20px;
  }
  32% {
    top: 0px;
  }
  56% {
    left: -20px;
  }
  58% {
    left: 0px;
  }
  100% {
    top: 0px;
  }
}

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


@keyframes fall-4 {
  0% {
    top: -1000px;
    left: 60px;
  }
  34% {
    top: 0px;
  }
  56% {
    left: 60px;
  }
  58% {
    left: 0px;
  }
  100% {
    top: 0px;
  }
}

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


@keyframes fall-3 {
  0% {
    top: -1000px;
    left: -60px;
  }
  36% {
    top: 0px;
  }
  56% {
    left: -60px;
  }
  58% {
    left: 0px;
  }
  100% {
    top: 0px;
  }
}

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


@keyframes fall-2 {
  0% {
    top: -1000px;
    left: 10px;
  }
  38% {
    top: 0px;
  }
  56% {
    left: 10px;
  }
  58% {
    left: 0px;
  }
  100% {
    top: 0px;
  }
}

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


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

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