Advanced CSS: animations, transitions, preprocessors (Sass)
Master advanced CSS techniques that will bring your interfaces to life! Discover how to create smooth animations, elegant transitions, and optimize your workflow with the Sass preprocessor for more maintainable and powerful stylesheets.
Educational objectives
- Create smooth CSS animations with @keyframes and animation
- Implement elegant transitions to improve the user experience
- Use 2D and 3D transformations to enrich your interfaces
- Discover the advantages of Sass: variables, nesting, and mixins
- Organizing and maintaining complex stylesheets with a preprocessor
Understanding the principle of transitions
CSS transitions allow you to create smooth state changes between two CSS property values. Rather than an abrupt change on hover or during interaction, the transition creates an automatic animation that greatly improves the user experience. Transitions apply to properties that can be numerically interpolated: colors, dimensions, positions, opacity, etc.
Essential properties of transitions
The property transition It accepts four values: the property to animate, the duration, the timing function (ease, linear, ease-in-out), and the delay. For example, transition: all 0.3s ease-in-out; will animate all modified properties over 0.3 seconds with a smooth acceleration curve. You can target specific properties such as transition: background-color 0.2s, transform 0.4s; for more precise control.
Key point Transitions only work when an element's state changes (hover, focus, class added via JavaScript). They do not trigger automatically on load.
Key points to remember
CSS transitions create smooth animations between two states by interpolating property values over a defined duration.
🎯 Mini-exercise: Create a color transition on hover
Create a button that smoothly changes background color when you hover over it.
Reference code:
.btn-transition { background-color: #3498db; color:white; padding: 12px 24px; border:none; border-radius: 6px; cursor: pointer; transition: background-color 0.3s ease; } .btn-transition:hover { background-color: #e74c3c; }
Monaco Editor v0.45
Essential 2D Transformations
The property transform allows you to modify the geometry of an element without affecting the document flow. 2D functions include translate() to move, scale() to resize, rotate() to rotate, and skew() to tilt. These transformations can be combined: transform: translate(50px, 100px) scale(1.2) rotate(45deg);. The major advantage is that these transformations are optimized by the GPU, guaranteeing smooth performance.
Explore 3D transformations
3D transformations add depth with features like translateZ(), rotateX(), rotateY() And rotateZ(). To activate the 3D context, use transform-style: preserve-3d; on the parent container. The property perspective Defines the viewing distance and the intensity of the 3D effect. The lower the value, the more pronounced the perspective effect. Combine with backface-visibility: hidden; to optimize performance during rotations.
Key point The transformations do not affect the actual position of the element in the document flow. The original space remains reserved even if the element visually moves.
Key points to remember
CSS transformations allow you to move, resize, rotate and skew elements in a way that is optimized by the GPU.
🎯 Mini-exercise: Card with 3D rotation effect
Create a card that rotates in 3D on hover to reveal its reverse side.
Reference code:
<div class="card-3d"> <div class="card-front">Front</div> <div class="card-back">Back</div> </div>
.card-3d { width: 200px; height: 120px; perspective: 1000px; margin: 50px; } .card-front, .card-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display:flex; align-items: center; justify-content: center; border-radius: 10px; font-weight: bold; color:white; transition: transform 0.6s; } .card-front { background: #3498db; } .card-back { background: #e74c3c; transform: rotateY(180deg); } .card-3d:hover .card-front { transform: rotateY(-180deg); } .card-3d:hover .card-back { transform: rotateY(0); }
Monaco Editor v0.45
Define an animation using @keyframes
Unlike transitions, which require a trigger, CSS animations are self-contained and can start automatically. They use the rule @keyframes to define the animation steps. Each step can be defined with percentages (0%, 50%, 100%) or the keywords "from" and "to". Within each keyframe, you define the CSS properties and their values. The browser automatically interpolates the values between each step, creating smooth movement.
Animation control properties
The property animation combines several sub-properties: animation-name (name of the @keyframes), animation-duration (duration), animation-timing-function (animation curve), animation-delay (deadline), animation-iteration-count (number of repetitions), animation-direction (reading direction), and animation-fill-mode (before/after state). For example: animation: slideIn 2s ease-out 0.5s infinite alternate both; will create a 2-second animation named "slideIn", with a 0.5s delay, repeated infinitely alternately.
Key point CSS animations are more efficient than JavaScript animations because they can be optimized by the browser and delegated to the GPU.
Key points to remember
@keyframes animations allow you to create complex, self-contained animation sequences with precise control over timing and repetitions.
🎯 Mini-exercise: Infinite pulse animation
Create an element that pulses by changing size continuously and repetitively.
Reference code:
<div class="pulse-circle"></div>
@keyframes pulse { 0% { transform: scale(1); background-color: #3498db; } 50% { transform: scale(1.3); background-color: #e74c3c; } 100% { transform: scale(1); background-color: #3498db; } } .pulse-circle { width: 80px; height: 80px; background-color: #3498db; border-radius: 50%; margin: 50px auto; animation: pulse 2s infinite ease-in-out; }
Monaco Editor v0.45
Why use a CSS preprocessor?
Sass (Syntactically Awesome Stylesheets) Sass is a preprocessor that extends the capabilities of CSS by adding programming features. It allows you to write more maintainable, reusable, and organized code. Sass compiles to standard CSS, compatible with all browsers. The two main syntaxes are SCSS (similar to CSS with curly braces) and indented Sass (without curly braces or semicolons). SCSS is generally preferred because it is closer to classic CSS.
Variables and nesting
THE Sass variables begin with the symbol $ and allow for the storage of reusable values: colors, fonts, dimensions. Example: $primary-color: #3498db;. THE nesting allows selectors to be nested, reflecting the HTML structure and improving readability. The operator & refers to the parent selector, useful for pseudo-classes: &:hover. Be careful not to overuse nesting (maximum 3-4 levels) to avoid excessive CSS specificity.
Key point Sass must be compiled into CSS to be used in the browser. Many tools like Node-sass, Dart Sass, or bundlers handle this compilation automatically.
Key points to remember
Sass improves CSS with variables for reusability and nesting for a clearer and maintainable structure.
🎯 Mini-exercise: Using Sass variables
Create a color theme with Sass variables and use nesting to style a button.
Reference code:
/* Sass variables */ $primary-color: #3498db; $hover-color: #2980b9; $text-color: white; $border-radius: 8px; $padding: 12px 24px; /* Nesting Sass */ .btn-sass { background-color: $primary-color; color: $text-color; padding: $padding; border:none; border-radius: $border-radius; cursor: pointer; transition: all 0.3s ease; &:hover { background-color: $hover-color; transform: translateY(-2px); } &:active { transform: translateY(0); } }
Monaco Editor v0.45
Create and use mixins
THE mixins are reusable CSS code blocks defined with @mixin and called with @include. They can accept parameters for greater flexibility. For example, a mixin for the buttons: @mixin button-style($bg-color, $text-color: white) { ... }. Mixins are perfect for vendor prefixes, complex patterns (flexbox centering, gradients), or repetitive media queries. They reduce code duplication and facilitate maintenance by centralizing common styles.
Sass Functions and Operations
Sass offers integrated functions to manipulate colors (lighten(), darken(), mix()), strings, numbers, and lists. You can create your own functions with @function. Mathematical operations (+, -, *, /, %) allow for dynamic calculations. Conditional functions @if, @else and the loops @for, @each They add programmable logic. This power allows for the automatic generation of complex CSS.
Key point Mixins generate CSS with each use, while inheritance with @extend shares the same selector. Choose according to the context to optimize the size of the final CSS.
Key points to remember
Sass mixins and functions allow you to create modular and reusable code with customizable parameters and dynamic operations.
🎯 Mini-exercise: Create a mixin to center the elements
Develop a reusable flexbox mixin to center elements horizontally and vertically.
Reference code:
<div class="container"> <div class="centered-box">Center !</div> </div>
/* Mixin to center elements */ @mixin flex-center($direction: row) { display: flex; justify-content: center; align-items: center; flex-direction: $direction; } /* Function to calculate responsive sizes */ @function rem-calc($px) { @return $px / 16 * 1rem; } .container { @include flex-center(); height: 200px; background-color: #ecf0f1; } .centered-box { width: rem-calc(120); height: rem-calc(80); background-color: #3498db; color:white; @include flex-center(); border-radius: rem-calc(8); font-weight: bold; }
Monaco Editor v0.45
Summary
Key points to remember
- CSS Transitions Create smooth animations between two element states using duration, timing-function, and delay.
- 2D/3D Transformations : Allows you to move, resize, and rotate elements without affecting the document flow
- @keyframes animations They define self-contained animation sequences with precise control over timing and repetitions.
- Sass variables and nesting Improve CSS maintainability with reusable values and a clear hierarchical structure
- Sass Mixins and Functions They offer a modular approach with reusable code blocks and advanced dynamic operations.
Sources
To deepen your knowledge:
Validate your knowledge
Test your understanding with this 10-question quiz:
