Bringing Interaction to Life: Intro to CSS Transitions & Animations
Discover how to add fluid motion and complex sequences to your web elements using CSS transitions and animations.
Welcome! Let's explore the two main ways to add motion in CSS: transitions and animations.
Smooth State Changes with 'transition'
A transition provides a smooth change between two states of an element, like when a user hovers over a button. Instead of an instant change, the properties gradually animate over a set duration. It's defined with the transition property.
Creating Sequences with '@keyframes'
An animation allows for more complex, multi-step sequences that can run automatically without a user trigger. You define the steps using the @keyframes at-rule and then apply the animation to an element using properties like animation-name and animation-duration.
Transitions vs. Animations: When to Use Which?
Use transitions for simple feedback on state changes (e.g., hover, focus, active). Use animations for more elaborate, continuous, or attention-grabbing effects like loading spinners, character movements, or introductory sequences.
Writing Cleaner Code with Shorthands
Both transitions and animations have shorthand properties to make your code concise. For example: transition: all 0.3s ease-out; and animation: bounce 2s infinite; combine multiple properties into one line.
Practice Zone
Interactive Test 1: Match the Concepts
Arrastra en el orden correspondiente.
Arrastra las opciones:
Completa el código:
Interactive Test 2: Complete the Transition
Rellena los huecos en cada casilla.
.button { background-color: blue; : background-color ease; } .button:hover { background-color: red; }
Practice Example: Code Editor
Make the button's background color transition over 0.4s. Also, add a continuous 'shake' animation to it that runs for 3 seconds infinitely.
A Practical Guide to UI Motion
Motion in user interfaces isn't just decoration; it's a powerful tool for communication. Well-designed transitions and animations guide users, provide feedback, and create a more intuitive experience.
1. Enhancing Feedback with Transitions
Transitions are perfect for acknowledging user actions. For example, smoothly changing the border color and shadow of an input field on :focus provides clear, gentle feedback that the element is active.
.input {
transition: border-color 0.3s,
box-shadow 0.3s;
}
.input:focus {
border-color: #4f46e5;
box-shadow: 0 0 0 3px #c7d2fe;
}2. Drawing Attention with Animations
Animations can guide a user's attention to important events. A "shake" animation on a login form after an incorrect password submission immediately communicates an error without being disruptive.
@keyframes shake {
10%, 90% { transform: translateX(-1px); }
20%, 80% { transform: translateX(2px); }
/* ... and so on */
}
.form-error .submit-btn {
animation: shake 0.8s;
}3. Combining Transitions and Animations
You can use both on the same element for a rich effect. This card has a subtle, continuous glowing animation, and also a transition that makes it "lift up" when you hover over it.
.card {
animation: subtle-glow 4s infinite alternate;
transition: transform 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
}Practical Takeaway: Use motion with purpose. A good transition or animation feels natural and supports the user's goals, making the interface feel more responsive and alive.