Custom keyframe animations in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a custom keyframe named 'fadeIn' in Tailwind CSS.

Tailwind

module.exports = {
  theme: {
    extend: {
      keyframes: {
        fadeIn: {
          '0%': { opacity: '0' },
          '100%': { opacity: '[1]' }
        }
      }
    }
  }
}

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

A50%

B0

C1

D2

Attempts:

3 left

💡 Hint

Common Mistakes

Using 0 instead of 1 for opacity at 100% makes the element invisible.

The opacity at 100% should be '1' to fully show the element.

2fill in blank

medium

Complete the code to add the custom animation 'fadeIn' with a duration of 2 seconds.

Tailwind

module.exports = {
  theme: {
    extend: {
      animation: {
        fadeIn: '[1] 2s ease-in-out'
      }
    }
  }
}

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

AfadeIn

BfadeOut

CslideIn

Dbounce

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different animation name than the keyframe causes no animation.

The animation name must match the keyframe name 'fadeIn' to work correctly.

3fill in blank

hard

Fix the error in the keyframe definition to make the 'slideRight' animation move from left to right.

Tailwind

keyframes: {
  slideRight: {
    '0%': { transform: 'translateX([1])' },
    '100%': { transform: 'translateX(0)' }
  }
}

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

A-100%

B100%

C50%

D0%

Attempts:

3 left

💡 Hint

Common Mistakes

Using positive 100% starts off screen right, not left.

To slide from left to right, start at -100% (off screen left) and move to 0.

4fill in blank

hard

Fill both blanks to create a 'bounce' keyframe that moves up and down.

Tailwind

keyframes: {
  bounce: {
    '0%, 100%': { transform: 'translateY([1])' },
    '50%': { transform: 'translateY([2])' }
  }
}

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

A0%

B-25%

C25%

D-50%

Attempts:

3 left

💡 Hint

Common Mistakes

Using positive values at 50% moves the element down instead of up.

The element starts and ends at 0% vertical movement, and moves up by -25% at 50%.

5fill in blank

hard

Fill all three blanks to define a 'spinAndFade' animation that spins and fades out.

Tailwind

keyframes: {
  spinAndFade: {
    '0%': { transform: 'rotate([1])', opacity: [2] },
    '100%': { transform: 'rotate([3])', opacity: 0 }
  }
}

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

A0deg

B1

C360deg

D180deg

Attempts:

3 left

💡 Hint

Common Mistakes

Using 180deg ends halfway rotation, not full spin.

Starting opacity less than 1 makes it partially transparent at start.

The animation starts at 0 degrees rotation and full opacity (1), and ends at 360 degrees rotation and opacity 0.