CobblestonesBVLL: Created page with "/* ============================== BIBISI LAUNCHER CSS Click-to-launch via :focus ============================== / .rocket-wrapper { display: block; position: relative; cursor: pointer; outline: none; } .rocket { display: block; } .rocket-explosion { display: flex; align-items: center; justify-content: center; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; } / Trigger animations when clicked..."

2026-04-16T18:14:15Z

Created page with "============================== BIBISI LAUNCHER CSS Click-to-launch via :focus ==============================: .rocket-wrapper { display: block; position: relative; cursor: pointer; outline: none; } .rocket { display: block; } .rocket-explosion { display: flex; align-items: center; justify-content: center; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; } /* Trigger animations when clicked..."

New page

/* ==============================
BIBISI LAUNCHER CSS
Click-to-launch via :focus
============================== */

.rocket-wrapper {
display: block;
position: relative;
cursor: pointer;
outline: none;
}

.rocket {
display: block;
}

.rocket-explosion {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
opacity: 0;
}

/* Trigger animations when clicked */
.rocket-wrapper:focus .rocket,
.rocket-wrapper:active .rocket {
/* 1. Shake for 0.6 seconds */
/* 2. Then fly for 2.4 seconds (starts after a 0.6s delay) */
animation:
rocket-shake 0.6s linear,
rocket-fly 2.4s ease-in 0.6s forwards;
}

.rocket-wrapper:focus .rocket-explosion,
.rocket-wrapper:active .rocket-explosion {
animation: explode 1.2s ease-out forwards;
animation-delay: 3s; /* Triggers exactly when the 3-second flight ends */
}

/* The shake effect */
@keyframes rocket-shake {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
20% { transform: translate(-3px, 2px) rotate(-5deg); }
40% { transform: translate(3px, -2px) rotate(5deg); }
60% { transform: translate(-3px, 2px) rotate(-5deg); }
80% { transform: translate(3px, -2px) rotate(5deg); }
}

/* The flight: Solid all the way up, then instantly vanishes at the very end */
@keyframes rocket-fly {
0% { transform: translateY(0); opacity: 1; }
99% { transform: translateY(-110vh); opacity: 1; } /* Stays solid until the end */
100% { transform: translateY(-110vh); opacity: 0; } /* Vanishes as explosion starts */
}

@keyframes explode {
0% { transform: translateY(-110vh) scale(1); opacity: 1; }
100% { transform: translateY(-110vh) scale(6); opacity: 0; }
}

Template:CobblestonesBVLL/style.css - Revision history