Custom keyframe animations in Tailwind - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a keyframe animation in CSS?

A keyframe animation defines how an element changes styles step-by-step over time. It lets you create smooth movements or effects by specifying styles at different points (keyframes).

beginner

How do you define custom keyframes in Tailwind CSS?

You add a keyframes section inside the extend part of your Tailwind config file. Then you create an animation that uses those keyframes by name.

intermediate

Why use custom keyframe animations instead of built-in Tailwind animations?

Custom keyframes let you create unique animations tailored to your design. Built-in animations are limited, but custom ones give full control over movement, timing, and style changes.

beginner

What is the role of the animation property in Tailwind after defining keyframes?

The animation property applies the custom keyframe animation to an element. It controls how long the animation runs, how it repeats, and its timing.

beginner

How can you make a custom animation run infinitely in Tailwind?

In the Tailwind config, when defining the animation, add infinite to the animation value. For example: animation: 'spin 3s linear infinite' makes it loop forever.

Where do you add custom keyframe definitions in Tailwind CSS?

A Inside the <code>plugins</code> section of tailwind.config.js

B Directly in your HTML file

C In a separate CSS file only

D Inside the <code>extend.keyframes</code> section of tailwind.config.js

Custom keyframes go inside the extend.keyframes part of the Tailwind config file to extend the default animations.

What does the animation property control in Tailwind?

A The colors of the animation

B The font size during animation

C How the animation runs, including duration and repetition

D The layout of the page

The animation property sets how long the animation runs, its timing, and if it repeats.

How do you make a custom animation repeat forever in Tailwind?

A Add <code>repeat-forever</code> class

B Use <code>animation: 'name duration ease infinite'</code> in config

C Set <code>loop: true</code> in HTML

D Use <code>repeat: infinite</code> in CSS

You add infinite to the animation value in the Tailwind config to make it loop endlessly.

Which CSS rule defines the steps of an animation?

A <code>@keyframes</code>

B <code>@media</code>

C <code>@font-face</code>

D <code>@import</code>

@keyframes defines the style changes at different points in an animation.

What is the first step to use a custom animation in Tailwind?

A Define keyframes in tailwind.config.js

B Write HTML with animation classes

C Add a script tag in HTML

D Install a plugin

You must first define your custom keyframes in the Tailwind config before using them.

Explain how to create and use a custom keyframe animation in Tailwind CSS.

Think about the config file and how Tailwind applies animations.

Describe why custom keyframe animations are useful compared to built-in Tailwind animations.

Consider the limits of built-in animations.

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