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.

Practice

1. What is the main purpose of defining custom keyframe animations in Tailwind CSS?

easy

A. To create unique movement effects on webpage elements

B. To change the color palette of the website

C. To add new font families to the project

D. To optimize image loading speed

Solution

1. Step 1: Understand what keyframe animations do

   Keyframe animations define how elements move or change over time.

2. Step 2: Relate to Tailwind's custom animations

   Custom keyframe animations let you create unique movement effects beyond default animations.

3. Final Answer:

   To create unique movement effects on webpage elements -> Option A

4. Quick Check:

   Custom animations = unique movements [OK]

Hint: Think about what animations visually do on a page [OK]

Common Mistakes:

• Confusing animations with color or font changes
• Thinking animations improve loading speed
• Mixing animations with layout changes

2. Which of the following is the correct way to define a custom keyframe animation in Tailwind's tailwind.config.js?

easy

A. "extend: { colors: { bounce: '#000' }, animation: { bounce: 'bounce 1s infinite' } }"

B. "extend: { keyframes: { bounce: { '0%': { transform: 'translateY(0)' }, '50%': { transform: 'translateY(-25%)' }, '100%': { transform: 'translateY(0)' } } }, animation: { bounce: 'bounce 1s infinite' } }"

C. "extend: { fontFamily: { bounce: ['Arial'] }, animation: { bounce: 'bounce 1s infinite' } }"

D. "extend: { spacing: { bounce: '1rem' }, animation: { bounce: 'bounce 1s infinite' } }"

Solution

1. Step 1: Identify keyframe syntax in Tailwind config

   Keyframes are defined inside extend.keyframes with percentage steps and CSS properties.

2. Step 2: Check animation property linking keyframes

   The animation name and duration are set inside extend.animation.

3. Final Answer:

   extend: { keyframes: { bounce: { '0%': { transform: 'translateY(0)' }, '50%': { transform: 'translateY(-25%)' }, '100%': { transform: 'translateY(0)' } } }, animation: { bounce: 'bounce 1s infinite' } } -> Option B

4. Quick Check:

   Keyframes + animation property = correct syntax [OK]

Hint: Look for keyframes with percentages and transform properties [OK]

Common Mistakes:

• Defining colors or fonts instead of keyframes
• Missing percentage steps in keyframes
• Not linking animation name to keyframes

3. Given this Tailwind config snippet:

extend: { keyframes: { fadeIn: { '0%': { opacity: '0' }, '100%': { opacity: '1' } } }, animation: { fadeIn: 'fadeIn 2s ease-in forwards' } }

What will happen when you add class="animate-fadeIn" to an element?

medium

A. The element will instantly appear without animation

B. The element will slide left to right repeatedly

C. The element will fade out from visible to transparent

D. The element will fade in from transparent to fully visible over 2 seconds

Solution

1. Step 1: Analyze keyframes named fadeIn

   Opacity changes from 0 (invisible) at 0% to 1 (visible) at 100%.

2. Step 2: Understand animation properties

   Animation lasts 2 seconds, easing in, and stays at final state (forwards).

3. Final Answer:

   Element fades in from transparent to visible over 2 seconds -> Option D

4. Quick Check:

   fadeIn keyframes = fade in effect [OK]

Hint: Check opacity changes in keyframes for fade effects [OK]

Common Mistakes:

• Confusing fadeIn with slide animations
• Ignoring animation duration and easing
• Assuming fade out instead of fade in

4. You wrote this Tailwind config for a custom animation:

extend: { keyframes: { spinSlow: { '0%': { transform: 'rotate(0deg)' }, '100%': { transform: 'rotate(360deg)' } } }, animation: { spinSlow: 'spinSlow 3s linear infinite' } }

But the animation does not run on your element with class="animate-spinSlow". What is the likely problem?

medium

A. You forgot to restart the development server after changing the config

B. The keyframe percentages must be 0 and 1, not 0% and 100%

C. The animation name in the class should be spin-slow instead of spinSlow

D. Tailwind does not support custom animations

Solution

1. Step 1: Check Tailwind config syntax

   The keyframe and animation syntax is correct with '0%' and '100%' and camelCase names.

2. Step 2: Understand Tailwind build process

   Changes in tailwind.config.js require restarting the development server to apply.

3. Final Answer:

   Forgot to restart the development server after config change -> Option A

4. Quick Check:

   Restart server after config edits [OK]

Hint: Restart dev server after config changes to apply them [OK]

Common Mistakes:

• Using wrong percentage syntax in keyframes
• Wrong animation class name format
• Believing Tailwind can't do custom animations

5. You want to create a custom Tailwind animation that moves an element up 20px and fades it in simultaneously over 1.5 seconds. Which config snippet correctly defines this animation?

hard

A. "extend: { keyframes: { moveUpFadeIn: { '0%': { transform: 'translateY(0)', opacity: '1' }, '100%': { transform: 'translateY(20px)', opacity: '0' } } }, animation: { moveUpFadeIn: 'moveUpFadeIn 1.5s ease-out forwards' } }"

B. "extend: { keyframes: { moveUpFadeIn: { '0%': { transform: 'translateX(20px)', opacity: '1' }, '100%': { transform: 'translateX(0)', opacity: '0' } } }, animation: { moveUpFadeIn: 'moveUpFadeIn 1.5s ease-out forwards' } }"

C. "extend: { keyframes: { moveUpFadeIn: { '0%': { transform: 'translateY(20px)', opacity: '0' }, '100%': { transform: 'translateY(0)', opacity: '1' } } }, animation: { moveUpFadeIn: 'moveUpFadeIn 1.5s ease-out forwards' } }"

D. "extend: { keyframes: { moveUpFadeIn: { '0%': { transform: 'translateY(20px)', opacity: '1' }, '100%': { transform: 'translateY(0)', opacity: '0' } } }, animation: { moveUpFadeIn: 'moveUpFadeIn 1.5s ease-out forwards' } }"

Solution

1. Step 1: Identify correct transform and opacity start/end values

   Moving up means translateY from 20px (start) to 0 (end). Fading in means opacity from 0 to 1.

2. Step 2: Match animation timing and properties

   Duration 1.5s, easing ease-out, and forwards to keep final state are correct.

3. Final Answer:

   extend: { keyframes: { moveUpFadeIn: { '0%': { transform: 'translateY(20px)', opacity: '0' }, '100%': { transform: 'translateY(0)', opacity: '1' } } }, animation: { moveUpFadeIn: 'moveUpFadeIn 1.5s ease-out forwards' } } -> Option C

4. Quick Check:

   TranslateY 20px to 0 + opacity 0 to 1 = move up fade in [OK]

Hint: Check start/end transform and opacity values carefully [OK]

Common Mistakes:

• Using translateX instead of translateY for vertical movement
• Reversing opacity values (fade out instead of fade in)
• Swapping start and end positions