Template:BibisiLauncher/style.css: Difference between revisions

/* The launch animation */
@keyframes launch-sequence {
  0% { transform: translateY(0); opacity: 1; }
  80% { transform: translateY(-500px); opacity: 1; } /* Travel up */
  90% { transform: translateY(-500px) scale(2); opacity: 0; } /* Explode effect */
  100% { opacity: 0; }
}

.missile-object {
  position: fixed; /* Fixes it to the screen so it flies over everything */
  bottom: 0;
  left: 50%;
  visibility: hidden;
  z-index: 9999;
  font-size: 50px;
}

/* Trigger: When the button is clicked, the missile starts the animation */
.launcher-btn:active + .missile-object {
  visibility: visible;
  animation: launch-sequence 2s ease-out forwards;
}

.launcher-btn {
  cursor: pointer;
  display: inline-block;
  padding: 10px;
  background: #333;
  color: #fff;
}