Hanya satu animasi CSS

Hover atau tap untuk melihat dari sudut yang berbeza-beza.

Demo

HTML view ▼

<div class="labu">
<div class="bulat">
  <div class="ceper"></div>
  <div class="ceper"></div>
  <div class="ceper"></div>
  <div class="ceper"></div>
  <div class="ceper"></div>
  <div class="ceper"></div>
  <div class="ceper"></div>
  <div class="ceper"></div>
  <div class="ceper"></div>
  <div class="ceper"></div>
  </div></div>
<style>
  .labu *, .labu *::before, .labu *::after {
  padding: 0;
  margin: 0 auto;
  box-sizing: border-box;
}
:root {
  --pi: 3.1415926536;
}
.labu {
  min-height: 400px;
  display: grid;
  place-items: center;
  perspective: 1800px;
}
.labu *:not(:empty) {
  transform-style: preserve-3d;
}
.bulat {
  position: relative;
  width: 300px;
  height: 300px;
  cursor: move;
  -webkit-animation: grk 20s infinite linear paused;
          animation: grk 20s infinite linear paused;
}
@-webkit-keyframes grk {
  from {
    transform: rotateX(-30deg) rotateZ(0deg);
  }
  to {
    transform: rotateX(330deg) rotateZ(360deg);
  }
}
@keyframes grk {
  from {
    transform: rotateX(-30deg) rotateZ(0deg);
  }
  to {
    transform: rotateX(330deg) rotateZ(360deg);
  }
}
.bulat:hover {
  -webkit-animation-play-state: running;
          animation-play-state: running;
}
.ceper {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 10px #0002;
  -webkit-animation: eleh 10s var(--delay) infinite ease-in-out;
          animation: eleh 10s var(--delay) infinite ease-in-out;
}
.ceper:nth-child(1) {
  --delay: 0s;
}
.ceper:nth-child(2) {
  --delay: -1s;
}
.ceper:nth-child(3) {
  --delay: -2s;
}
.ceper:nth-child(4) {
  --delay: -3s;
}
.ceper:nth-child(5) {
  --delay: -4s;
}
.ceper:nth-child(6) {
  --delay: -5s;
}
.ceper:nth-child(7) {
  --delay: -6s;
}
.ceper:nth-child(8) {
  --delay: -7s;
}
.ceper:nth-child(9) {
  --delay: -8s;
}
.ceper:nth-child(10) {
  --delay: -9s;
}
@-webkit-keyframes eleh {
  0% {
    transform: rotateX(90deg) scale(0) translateZ(200px);
    background-color: #1d182f;
  }
  10% {
    transform: rotateX(90deg) scale(calc(sin(var(--pi) * 0.1))) translateZ(calc(cos(var(--pi) * 0.1) * 200px));
    background-color: #251c47;
  }
  20% {
    transform: rotateX(90deg) scale(calc(sin(var(--pi) * 0.2))) translateZ(calc(cos(var(--pi) * 0.2) * 200px));
    background-color: #332765;
  }
  30% {
    transform: rotateX(90deg) scale(calc(sin(var(--pi) * 0.3))) translateZ(calc(cos(var(--pi) * 0.3) * 200px));
    background-color: #134697;
  }
  40% {
    transform: rotateX(90deg) scale(calc(sin(var(--pi) * 0.4))) translateZ(calc(cos(var(--pi) * 0.4) * 200px));
    background-color: #1c5ba8;
  }
  50% {
    transform: rotateX(90deg) scale(calc(sin(var(--pi) * 0.5))) translateZ(calc(cos(var(--pi) * 0.5) * 200px));
    background-color: #4b6eb0;
  }
  60% {
    transform: rotateX(90deg) scale(calc(sin(var(--pi) * 0.6))) translateZ(calc(cos(var(--pi) * 0.6) * 200px));
    background-color: #908bbf;
  }
  70% {
    transform: rotateX(90deg) scale(calc(sin(var(--pi) * 0.7))) translateZ(calc(cos(var(--pi) * 0.7) * 200px));
    background-color: #c3abd1;
  }
  80% {
    transform: rotateX(90deg) scale(calc(sin(var(--pi) * 0.8))) translateZ(calc(cos(var(--pi) * 0.8) * 200px));
    background-color: #c6c8de;
  }
  90% {
    transform: rotateX(90deg) scale(calc(sin(var(--pi) * 0.9))) translateZ(calc(cos(var(--pi) * 0.9) * 200px));
    background-color: #e8ecf7;
  }
  100% {
    transform: rotateX(90deg) scale(0) translateZ(-200px);
    background-color: #e8ecf7;
  }
}
@keyframes eleh {
  0% {
    transform: rotateX(90deg) scale(0) translateZ(200px);
    background-color: #0c343d;
  }
  10% {
    transform: rotateX(90deg) scale(calc(sin(var(--pi) * 0.1))) translateZ(calc(cos(var(--pi) * 0.1) * 200px));
    background-color: #134f5c;
  }
  20% {
    transform: rotateX(90deg) scale(calc(sin(var(--pi) * 0.2))) translateZ(calc(cos(var(--pi) * 0.2) * 200px));
    background-color: #45818e;
  }
  30% {
    transform: rotateX(90deg) scale(calc(sin(var(--pi) * 0.3))) translateZ(calc(cos(var(--pi) * 0.3) * 200px));
    background-color: #76a5af;
  }
  40% {
    transform: rotateX(90deg) scale(calc(sin(var(--pi) * 0.4))) translateZ(calc(cos(var(--pi) * 0.4) * 200px));
    background-color: #a2c4c9;
  }
  50% {
    transform: rotateX(90deg) scale(calc(sin(var(--pi) * 0.5))) translateZ(calc(cos(var(--pi) * 0.5) * 200px));
    background-color: #d0e0e3;
  }
  60% {
    transform: rotateX(90deg) scale(calc(sin(var(--pi) * 0.6))) translateZ(calc(cos(var(--pi) * 0.6) * 200px));
    background-color: #d9ead3;
  }
  70% {
    transform: rotateX(90deg) scale(calc(sin(var(--pi) * 0.7))) translateZ(calc(cos(var(--pi) * 0.7) * 200px));
    background-color: #b6d7a8;
  }
  80% {
    transform: rotateX(90deg) scale(calc(sin(var(--pi) * 0.8))) translateZ(calc(cos(var(--pi) * 0.8) * 200px));
    background-color: #93c47d;
  }
  90% {
    transform: rotateX(90deg) scale(calc(sin(var(--pi) * 0.9))) translateZ(calc(cos(var(--pi) * 0.9) * 200px));
    background-color: #6aa84f;
  }
  100% {
    transform: rotateX(90deg) scale(0) translateZ(-200px);
    background-color: #6aa84f;
  }
}
</style>

Tutup

Kod disesuaikan, dipetik dari codepen.io/amit_sheen/pen/poxrrMr