Custom keyframe animations in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

Identify the correct Tailwind CSS custom keyframe syntax

Which option correctly defines a custom keyframe animation named fadeIn in Tailwind CSS configuration?

A "keyframes": { 'fadeIn': { '0%': { opacity: 0 }, '100%': { opacity: 1 } } }

B "keyframes": { "fadeIn": { "0%": { opacity: '0' }, "100%": { opacity: '1' } } }

C "keyframes": { fadeIn: { 'from': { opacity: 0 }, 'to': { opacity: 1 } } }

D "keyframes": { fadeIn: { 0: { opacity: '0' }, 100: { opacity: '1' } } }

💡 Hint

Remember that keys for percentages must be strings with % sign, and opacity values are numbers without quotes.

Tailwind CSS expects keyframe percentages as strings with '%' sign, and numeric CSS values like opacity should be numbers, not strings. Option A uses correct quotes and numeric values.

❓ rendering

intermediate

What visual effect does this Tailwind animation produce?

Given this Tailwind CSS animation configuration and usage, what will you see in the browser?

module.exports = {
  theme: {
    extend: {
      keyframes: {
        slideRight: {
          '0%': { transform: 'translateX(0)' },
          '100%': { transform: 'translateX(100px)' }
        }
      },
      animation: {
        slideRight: 'slideRight 2s ease-in-out forwards'
      }
    }
  }
}

A A blue square rotates 360 degrees in 2 seconds.

B A blue square fades out gradually over 2 seconds.

C A blue square moves smoothly 100 pixels to the right over 2 seconds and stays there.

D A blue square moves 100 pixels to the left and then returns to start.

💡 Hint

Look at the transform property and the animation direction.

The keyframe moves the element from translateX(0) to translateX(100px) over 2 seconds with forwards fill mode, so it stays at the end position.

❓ selector

advanced

Which Tailwind utility applies a custom animation named 'bounceSlow'?

If you define a custom animation named bounceSlow in Tailwind config, which class applies it correctly to an element?

A bounceSlow-animate

B animation-bounceSlow

C animate__bounceSlow

D animate-bounceSlow

💡 Hint

Tailwind animation utilities start with 'animate-' prefix.

Tailwind uses the prefix 'animate-' followed by the animation name to apply animations. So 'animate-bounceSlow' is correct.

❓ layout

advanced

How to combine custom keyframe animation with Flexbox layout in Tailwind?

You want a container to center its children horizontally and vertically and apply a custom fade-in animation on load. Which Tailwind classes achieve this?

A grid place-items-center animate-fadeIn

B flex justify-center items-center animate-fadeIn

C flex justify-center animate-fadeIn

D flex items-center animate-fadeIn

💡 Hint

Flexbox centering requires both justify-center and items-center.

To center children horizontally and vertically with Flexbox, use both justify-center and items-center. Adding animate-fadeIn applies the animation.

❓ accessibility

expert

How to ensure custom keyframe animations in Tailwind are accessible?

Which approach best improves accessibility when using custom animations in Tailwind CSS?

A Respect prefers-reduced-motion media query to disable animations for users who prefer less motion.

B Use very fast animations to minimize distraction.

C Add aria-hidden="true" to animated elements to hide them from screen readers.

D Use only color changes in animations to avoid motion issues.

💡 Hint

Consider user preferences for motion sensitivity.

Using the prefers-reduced-motion media query disables animations for users who want less motion, improving accessibility. Fast animations or hiding elements can harm accessibility.