Mission 8: Energize the Warp Core
The main warp core on the U.S.S. Endeavour is stable but needs to be brought to full power. Command wants a clear visual indicator of its energy state. You must create a 'pulsing' effect.
Mission Objective
Step 1 / 3
System Briefing: Motion & Feedback
Technician, a static interface is an uninformative one. We need to add motion and life to our elements to provide clear visual feedback and draw attention to critical system states. This is the domain of CSS Transitions and Animations.
Transitions: Smooth State Changes
The transition property provides a way to control the speed of an animation when a property changes state (e.g., on :hover). It lets you create smooth, gradual changes instead of abrupt ones.
/* When hovering over this button, the background color will fade over 0.3 seconds */
.button {
background-color: blue;
transition: background-color 0.3s ease-in-out;
}
.button:hover {
background-color: lightblue;
}
Animations: Complex, Multi-Step Motion
For more complex sequences, we use the @keyframes rule. This allows you to define specific "stops" in an animation sequence, from 0% (the start) to 100% (the end). You then apply these keyframes to an element using the animation property.
/* 1. Define the animation steps */
@keyframes pulse-glow {
0% { box-shadow: 0 0 5px cyan; }
50% { box-shadow: 0 0 25px cyan; }
100% { box-shadow: 0 0 5px cyan; }
}
/* 2. Apply the animation to an element */
.warp-core {
animation-name: pulse-glow;
animation-duration: 2s;
animation-iteration-count: infinite;
}