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.