CSS Formatting — Animations, Transitions
Discover the art of bringing your web interfaces to life with CSS animations and transitions! This lesson will teach you how to create engaging visual effects that will enhance the user experience of your websites.
Educational objectives
- Mastering CSS transitions to create smooth effects
- Understanding CSS animation properties and their use
- Create custom animations with @keyframes
- Optimize the performance of web animations
- Applying UX best practices to animations
What is a CSS transition?
CSS transitions allow you to create gradual changes between two states of an element. Instead of an instantaneous, abrupt change, the transition creates a smooth interpolation between the initial and final values of a property. This technique significantly improves the user experience by making interfaces more natural and pleasant to use.
The transition property
The `transition` property is a shorthand that combines four sub-properties: `transition-property` (which property to animate), `transition-duration` (duration), `transition-timing-function` (animation curve), and `transition-delay` (delay before starting). For example, `transition: color 0.3s ease-in-out 0.1s` will animate the color for 0.3 seconds with an ease-in-out curve after a 0.1-second delay.
Key point Transitions are only activated during a state change, such as :hover, :focus, or via JavaScript.
Best practices Use durations between 200ms and 500ms for micro-interactions, and prefer transitions on transform and opacity for better performance.
Key points to remember
CSS transitions create gradual changes between element states, improving UX through smooth and natural effects.
Understanding animation curves
Timing functions define how an animation progresses over time. CSS offers several predefined values: linear (constant speed), ease (slow start, speed up, then slow down), ease-in (slow start), ease-out (slow end), and ease-in-out (slow start and slow end). Each function creates a different feel and influences the perceived smoothness.
Custom cubic-bezier functions
For precise control, you can use `cubic-bezier()` with four values defining the control points of a Bézier curve. For example, `cubic-bezier(0.68, -0.55, 0.265, 1.55)` creates a bouncing effect. Online tools like cubic-bezier.com make it easy to visualize and create these curves. Custom curves give your animations a unique identity.
Key point The `steps()` function allows you to create step-by-step animations, ideal for typewriter effects or sprites.
Material Design Google recommends curves like cubic-bezier(0.4, 0.0, 0.2, 1) for a natural and consistent feel
Key points to remember
Timing functions control the progression of animations and directly influence the perception of naturalness and fluidity.
Create custom animations
@keyframes allow you to define complex animations with multiple steps. Unlike transitions, which require a trigger, animations can start automatically. You define keyframes using percentages (0% to 100%) or the keywords "from" and "to". Each step can modify different CSS properties, creating sophisticated animation sequences.
Animation properties
The animation property combines several sub-properties: animation-name (animation name @keyframes), animation-duration (duration), animation-timing-function (curve), animation-delay (delay), animation-iteration-count (number of repetitions), animation-direction (playback direction), animation-fill-mode (before/after state), and animation-play-state (play/pause). These properties provide complete control over the animation's behavior.
Key point animation-fill-mode: forwards maintains the final state of the animation, backwards applies the initial state during the delay
Performance Preferably animate transform and opacity properties that trigger GPU compositing, rather than layout properties like width or height.
Key points to remember
@keyframes create complex multi-step animations with precise control over each phase of the animation.
2D and 3D transformations
The transform property is essential for creating effective animations. It allows you to modify the geometry of elements without affecting the document flow. 2D transformations include translate() (move), rotate() (rotate), scale() (resize), and skew() (skew). 3D transformations add translateZ(), rotateX(), rotateY(), and perspective(), opening up new creative possibilities.
Transform-origin and performance
The `transform-origin` property defines the reference point for transformations. By default, it's centered (50% 50%), but it can be modified to create specific effects, such as rotations around a corner. Transformations utilize the GPU's composition layer, resulting in high performance. Combining multiple transformations in a single declaration (`transform: translateX(100px) rotate(45deg)`) further optimizes performance.
Key point :will-change: transform notifies the browser that a property is going to be animated, optimizing performance
3D Tip Use `transform-style: preserve-3d` on the container to maintain the depth of the transformed child elements.
Key points to remember
Transform offers powerful geometric transformations essential for creating smooth and optimized animations.
Respect user preferences
The media query `prefers-reduced-motion` detects if the user has enabled the "Reduce Motion" option in their operating system. This allows users with motion sensitivity, vestibular disorders, or epilepsy to disable animations. Respect this preference by removing or drastically reducing animations with `@media (prefers-reduced-motion: reduce)`.
UX Animation Principles
Animations should have a purpose: to guide attention, provide feedback, or maintain spatial continuity. Avoid purely decorative animations that can be distracting. Adhere to the 12 principles of Disney animation adapted for the web: appropriate timing, ease of entry/exit, and consistency. Micro-interactions (hover, focus, click) should be subtle but perceptible, generally between 200 and 300ms.
Key point Loading and page transition animations improve the perception of performance even if the actual time doesn't change.
Accessibility Ensure your animations do not flash more than 3 times per second to avoid epileptic seizures.
Key points to remember
Animations should improve UX without compromising accessibility, respecting user preferences and best practices.
Practical exercise
🎯 Instructions
Create an animated profile card with an avatar that transforms on hover, buttons with smooth transitions, and a pop-up animation. The card should be responsive and include engaging hover effects.
Reference code:
<div class="carte-profil">
<div class="carte-avatar">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar Sarah">
</div>
<div class="carte-info">
<h3 class="carte-nom">Sarah Johnson</h3>
<p class="carte-titre">UX/UI Designer</p>
<p class="carte-description">Passionate about creating exceptional user experiences and digital innovation.</p>
<div class="carte-liens">
<a href="#" class="carte-lien carte-lien--primary">Portfolio</a>
<a href="#" class="carte-lien carte-lien--secondary">Contact</a>
</div>
</div>
</div>
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .profile-map { max-width: 400px; margin: 2rem self; background:white; border-radius: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); overflow:hidden; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease; animation: fadeInUp 0.6s ease-out; } .profile-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); } .avatar-card { position: relative; text-align: center; padding: 2rem 2rem 1rem; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } .avatar-card img { width: 120px; height: 120px; border-radius: 50%; border: 4px solid white; transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .profile-card:hover .avatar-card img { transform: scale(1.1) rotate(5deg); } .infocard { padding: 1.5rem 2rem 2rem; text-align: center; } .card-name { margin: 0 0 0.5rem; font-size: 1.5rem; font-weight: 600; color: #333; transition: color 0.3s ease; } .title card { margin: 0 0 1rem; color: #667eea; font-weight: 500; font-size: 1.1rem; } .map-description { margin: 0 0 1.5rem; color: #666; line-height: 1.6; font-size: 0.95rem; } .map-links { display: flex; gap: 1rem; justify-content: center; } .card-link { padding: 0.75rem 1.5rem; border-radius: 50px; text-decoration: none; font-weight: 500; font-size: 0.9rem; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow:hidden; } .map-link--primary { background: #667eea; color:white; } .map-link--primary:hover { background: #5a67d8; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4); } .map-link--secondary { border: 2px solid #667eea; color: #667eea; background: transparent; } .map-link--secondary:hover { background: #667eea; color:white; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3); } @media (prefers-reduced-motion: reduce) { .profile-card { animation: none; } .profile-card:hover { transform: none; } .profile-card:hover .avatar-card img { transform: none; } .map-link:hover { transform: none; } }
Monaco Editor v0.45
Summary
Key points to remember
- CSS Transitions : Create gradual changes between element states, activated by triggers like :hover
- Timing functions : Control the progression of animations with predefined or custom curves cubic-bezier()
- @keyframes animations : Allows the creation of complex, multi-step sequences with precise control over each phase
- Transform : High-performance property for 2D/3D geometric transformations using GPU compositing
- Accessibility and UX Respect prefers-reduced-motion and create useful animations that improve the user experience
Sources
To deepen your knowledge:
Validate your knowledge
Test your understanding with this 10-question quiz:
