Template:BibisiLauncher/style.css: Difference between revisions

/* Missile moves straight up */
@keyframes rocket-move {
  0% { transform: translateY(0); }
  100% { transform: translateY(-1200px); }
}

/* Fire/Smoke spawns, grows, rotates, and fades */
@keyframes particle-fire {
  0% { transform: scale(0.2) rotate(0deg); opacity: 1; }
  100% { transform: scale(2.5) rotate(45deg); opacity: 0; }
}

.missile-object {
  position: fixed;
  bottom: -50px;
  left: 50%;
  margin-left: -25px; /* Centers the rocket */
  font-size: 50px;
  visibility: hidden;
  z-index: 9999;
}

/* Particle style */
.particle {
  position: absolute;
  top: 50px; /* Offset under the rocket */
  left: 10px;
  font-size: 20px;
  visibility: hidden;
}

/* TRIGGER */
.launcher-btn:active + .missile-wrapper .missile-object {
  visibility: visible;
  animation: rocket-move 2s cubic-bezier(0.5, 0, 1, 0) forwards;
}

.launcher-btn:active + .missile-wrapper .particle {
  visibility: visible;
  animation: particle-fire 0.8s ease-out forwards;
}