Template:Party/style.css: Difference between revisions

/* 
==================================================
Template:Party/style.css
Controls the layout and the "thumping" speaker 
animation for the Party template.
==================================================
*/

.party-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px; 
    margin: 1em auto;
    padding: 20px; 
}

/* Base class for the speakers */
.party-speaker {
    flex-shrink: 0;
    /* 0.8s loop makes it fast, simulating a high-BPM beat */
    animation: speaker-pump 0.8s infinite;
    transform-origin: center center;
}

/* 
 * Complex keyframes simulate a "random" heavy bass beat.
 * By removing the delay, both speakers will now stay
 * the exact same size at the exact same time!
 */
@keyframes speaker-pump {
    0%   { transform: scale(1); }
    12%  { transform: scale(1.35); }
    25%  { transform: scale(0.95); }
    38%  { transform: scale(1.2); }
    50%  { transform: scale(1); }
    65%  { transform: scale(1.45); }
    75%  { transform: scale(0.9); }
    88%  { transform: scale(1.25); }
    100% { transform: scale(1); }
}