Challenge - 5 Problems
Master of Custom Keyframe Animations
Get all challenges correct to earn this badge!
Test your skills under time pressure!
📝 Syntax
intermediate2:00remaining
Identify the correct Tailwind CSS custom keyframe syntax
Which option correctly defines a custom keyframe animation named
fadeIn in Tailwind CSS configuration?Attempts:
2 left
💡 Hint
Remember that keys for percentages must be strings with % sign, and opacity values are numbers without quotes.
✗ Incorrect
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
intermediate2:00remaining
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'
}
}
}
}
Attempts:
2 left
💡 Hint
Look at the transform property and the animation direction.
✗ Incorrect
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
advanced2:00remaining
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?Attempts:
2 left
💡 Hint
Tailwind animation utilities start with 'animate-' prefix.
✗ Incorrect
Tailwind uses the prefix 'animate-' followed by the animation name to apply animations. So 'animate-bounceSlow' is correct.
❓ layout
advanced2:00remaining
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?
Attempts:
2 left
💡 Hint
Flexbox centering requires both justify-center and items-center.
✗ Incorrect
To center children horizontally and vertically with Flexbox, use both justify-center and items-center. Adding animate-fadeIn applies the animation.
❓ accessibility
expert2:00remaining
How to ensure custom keyframe animations in Tailwind are accessible?
Which approach best improves accessibility when using custom animations in Tailwind CSS?
Attempts:
2 left
💡 Hint
Consider user preferences for motion sensitivity.
✗ Incorrect
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.