Animation mixin patterns in SASS - Mini Project: Build & Apply

Animation Mixin Patterns with Sass

📖 Scenario: You are creating a simple webpage that uses Sass to add smooth animations to buttons. You want to write reusable animation mixins to keep your styles clean and easy to update.

🎯 Goal: Build a Sass stylesheet that defines animation mixins and applies them to buttons for a fade-in effect and a slide-in effect.

📋 What You'll Learn

Create a Sass map with animation names and durations

Define a mixin that accepts animation name and duration parameters

Use the mixin to create fade-in and slide-in animations

Apply the animations to button styles

💡 Why This Matters

🌍 Real World

Reusable animation mixins help keep CSS code clean and consistent across websites and apps.

💼 Career

Knowing how to write and use Sass mixins for animations is valuable for front-end developers working on interactive user interfaces.

1

Create a Sass map with animation names and durations

Create a Sass map called $animations with these exact entries: fade-in: 1s and slide-in: 0.5s.

SASS

# Create a Sass map called $animations with fade-in and slide-in durations
# Your code here

Need a hint?

Use parentheses to create a map and separate entries with commas.

2

Define a mixin for animations

Define a mixin called animation-mixin that takes two parameters: $name and $duration. Inside, set animation-name to $name and animation-duration to $duration.

SASS

$animations: (
  fade-in: 1s,
  slide-in: 0.5s
);

// Define animation-mixin here
# Your code here

Need a hint?

Use @mixin to define a mixin and set CSS properties inside curly braces.

3

Create keyframe animations and use the mixin

Create two keyframe animations: fade-in that changes opacity from 0 to 1, and slide-in that moves transform from translateX(-100%) to translateX(0). Then, create two classes: .btn-fade and .btn-slide. Use the animation-mixin with the correct animation name and duration from the $animations map inside each class.

SASS

$animations: (
  fade-in: 1s,
  slide-in: 0.5s
);

@mixin animation-mixin($name, $duration) {
  animation-name: $name;
  animation-duration: $duration;
}

// Add keyframes and button classes here
# Your code here

Need a hint?

Use @keyframes to define animations and @include to use mixins with values from the map.

4

Add animation properties for smooth effect

In both .btn-fade and .btn-slide classes, add animation-fill-mode: forwards; and animation-timing-function: ease-in-out; to make the animations smooth and keep the final state.

SASS

$animations: (
  fade-in: 1s,
  slide-in: 0.5s
);

@mixin animation-mixin($name, $duration) {
  animation-name: $name;
  animation-duration: $duration;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slide-in {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

.btn-fade {
  @include animation-mixin(fade-in, map-get($animations, fade-in));
  // Add animation-fill-mode and animation-timing-function here
}

.btn-slide {
  @include animation-mixin(slide-in, map-get($animations, slide-in));
  // Add animation-fill-mode and animation-timing-function here
}

Need a hint?

Add these properties inside both button classes to improve animation behavior.