Animation mixin patterns in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a simple animation mixin that sets the animation name.

SASS

@mixin animation-name($name) {
  animation-name: [1];
}

Drag options to blanks, or click blank then click option'

A$name

Bname

Canimation

Dkeyframes

Attempts:

3 left

💡 Hint

Common Mistakes

Using a string literal instead of the variable.

Forgetting the $ sign for the variable.

The mixin uses the parameter $name to set the animation-name property. So, $name is correct.

2fill in blank

medium

Complete the mixin to include animation duration with a default value of 1s.

SASS

@mixin animation-duration($duration: [1]) {
  animation-duration: $duration;
}

Drag options to blanks, or click blank then click option'

A2s

B100ms

C0s

D1s

Attempts:

3 left

💡 Hint

Common Mistakes

Using milliseconds instead of seconds.

Leaving the default value empty.

The default duration for animations is commonly set to 1s for smooth effect.

3fill in blank

hard

Fix the error in the mixin to correctly apply animation timing function.

SASS

@mixin animation-timing($timing) {
  animation-timing-function: [1];
}

Drag options to blanks, or click blank then click option'

Atiming

Banimation-timing

C$timing

Dtiming-function

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the $ sign before the variable.

Using incorrect property names.

Variables in Sass must be prefixed with $, so $timing is correct to use the parameter.

4fill in blank

hard

Fill both blanks to create a mixin that sets animation name and duration with default 2s.

SASS

@mixin animation-settings($name, $duration: [1]) {
  animation-name: [2];
  animation-duration: $duration;
}

Drag options to blanks, or click blank then click option'

A2s

B$name

C$duration

Dname

Attempts:

3 left

💡 Hint

Common Mistakes

Using variable names without $.

Setting default duration without units.

The default duration is 2s, and animation-name uses the $name variable.

5fill in blank

hard

Fill all three blanks to create a mixin that sets animation name, duration, and timing function with defaults.

SASS

@mixin animation-full($name, $duration: [1], $timing: [2]) {
  animation-name: [3];
  animation-duration: $duration;
  animation-timing-function: $timing;
}

Drag options to blanks, or click blank then click option'

A1.5s

Bease-in-out

C$name

Dlinear

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting $ before variable names.

Using invalid timing function strings.

Default duration is 1.5s, default timing is ease-in-out, and animation-name uses $name variable.