LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
html, body, .panel {
  height: 100%;
}

body {
  overflow: hidden;
  margin: 0;
  perspective: 20em;
  animation: bg 4s linear infinite;
}

.panel {
  width: 100%;
  transform-origin: 50% 100%;
  animation: slide 2s ease-in-out infinite, bg 4s linear -2s infinite;
}
.panel, .panel * {
  position: absolute;
}

@keyframes slide {
  0%, 50% {
    transform: rotateX(0deg) translateY(0);
  }
  75% {
    transform: rotateX(90deg) translateY(0);
  }
  100% {
    transform: rotateX(90deg) translateY(100%);
  }
}
.ball {
  top: 50%;
  left: 50%;
  margin: -6.5em;
  width: 13em;
  height: 13em;
  border-radius: 50%;
  animation: fall 2s ease-in infinite, bg 4s linear infinite;
}

@keyframes fall {
  0% {
    transform: translateY(-50vh);
  }
  46.5% {
    transform: translateY(0.125em);
  }
  43% {
    transform: translateY(-0.25em);
  }
  39.5% {
    transform: translateY(0.375em);
  }
  36% {
    transform: translateY(-0.5em);
  }
  32.5% {
    transform: translateY(0.625em);
  }
  29% {
    transform: translateY(-0.75em);
  }
  25.5% {
    transform: translateY(0.875em);
  }
  22% {
    transform: translateY(-1em);
  }
  18.5% {
    transform: translateY(1.125em);
  }
  15% {
    transform: translateY(-1.25em);
  }
  50%, 100% {
    transform: translateY(0);
  }
}
@keyframes bg {
  0%, 49.999% {
    box-shadow: 0 0 0.25em white;
    background: white;
  }
  50%, 100% {
    box-shadow: 0 0 0.25em black;
    background: black;
  }
}

Description

Pure CSS, should work in any browser supporting CSS animations. Inspiration:
Term
Tue, 11/28/2017 - 13:40

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv