Template:BibisiLauncher/style.css: Difference between revisions
From SNCApedia, the shit nobody cares about encyclopedia
Jump to navigationJump to search
SomebodyRum (talk | contribs) m css testing 3 |
SomebodyRum (talk | contribs) mNo edit summary |
||
| Line 1: | Line 1: | ||
/* | /* 1. Missile Path: Starts slow, then accelerates upward */ | ||
@keyframes launch | @keyframes rocket-launch { | ||
0% { transform: translateY(0 | 0% { transform: translateY(0); } | ||
20% { transform: translateY(-50px); } /* Slow glide phase */ | |||
20% { transform: translateY(-50px | 100% { transform: translateY(-1500px); } /* Speed phase */ | ||
100% { transform: translateY(-1500px) | |||
} | } | ||
.missile- | /* 2. Exhaust trail: Spawn at bottom, fade out, grow, and float */ | ||
@keyframes exhaust-trail { | |||
0% { opacity: 1; transform: scale(0.5); } | |||
100% { opacity: 0; transform: scale(3) translateY(-100px); } | |||
} | |||
.missile-container { | |||
position: fixed; | position: fixed; | ||
bottom: -100px | bottom: -100px; | ||
visibility: hidden; | visibility: hidden; | ||
z-index: 9999; | z-index: 9999; | ||
} | } | ||
. | /* This triggers the animations when the class is added via JS/Checkbox hack */ | ||
visibility: visible; | .launch-active { | ||
visibility: visible !important; | |||
animation: launch | animation: rocket-launch 2s cubic-bezier(0.4, 0, 1, 1) forwards; | ||
} | } | ||
. | .exhaust { | ||
display: inline-block; | display: inline-block; | ||
animation: exhaust-trail 1s ease-out infinite; | |||
} | } | ||
Revision as of 17:36, 10 April 2026
/* 1. Missile Path: Starts slow, then accelerates upward */
@keyframes rocket-launch {
0% { transform: translateY(0); }
20% { transform: translateY(-50px); } /* Slow glide phase */
100% { transform: translateY(-1500px); } /* Speed phase */
}
/* 2. Exhaust trail: Spawn at bottom, fade out, grow, and float */
@keyframes exhaust-trail {
0% { opacity: 1; transform: scale(0.5); }
100% { opacity: 0; transform: scale(3) translateY(-100px); }
}
.missile-container {
position: fixed;
bottom: -100px;
visibility: hidden;
z-index: 9999;
}
/* This triggers the animations when the class is added via JS/Checkbox hack */
.launch-active {
visibility: visible !important;
animation: rocket-launch 2s cubic-bezier(0.4, 0, 1, 1) forwards;
}
.exhaust {
display: inline-block;
animation: exhaust-trail 1s ease-out infinite;
}