T06: CSS to the Limit

CSS can do far more than change colors. With transitions, animations, and clever selectors, you can build interactive components without a single line of JavaScript. It is like discovering that your paintbrush can also sculpt.

Transitions

Transitions smoothly animate property changes. Specify which property to animate, how long it takes, and the easing function.

.button {
    background: #3498db;
    transition: background 0.3s ease, transform 0.2s ease;
}
.button:hover {
    background: #2980b9;
    transform: scale(1.05);
}

Keyframe Animations

For more complex motion, define keyframes with specific states at different points in time.

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
.card { animation: fadeIn 0.5s ease-out; }

Pure CSS Accordion

The :target pseudo-class lets you toggle visibility based on URL hash, creating interactive components without JavaScript.

.panel { max-height: 0; overflow: hidden; transition: max-height 0.3s; }
.panel:target { max-height: 500px; }