Simple Animations

Tailwind does not provide a full implementation of CSS animation and transformation behavior. However, it does provide useful defaults for common behaviors. The Tailwind documentation admits that these are only suggestions and that most projects that use animation need to define custom behavior.

Utility

Tailwind provides four full animation utilities— .animate-spin, .animate-pulse, .animate-bounce, and .animate-ping. These classes define CSS animations and a set of keyframes to use on an element.

The first utility, .animate-spin, animates a full rotation of an object 360 degrees in one second. It’s designed to be used for things like a loading status marker. If we have an SVG or image we want to use, we add .animate-spin to the SVG or image element (not its container), and the element will rotate.

Another common load behavior is to display dummy elements and gradually replace them with data as the server provides it. The second Tailwind utility, .animate-pulse, gives us a two-second transition between 0.1 opacity and 0.5, which produces a slight fade effect on the element.

The third utility, .animate-bounce, describes a one-second transition translating the vertical position down by 25% of the size of the element and then back to the original position, so it gives a slight downward bounce.

Author’s Note: This one works nicely as a .hover:animate-bounce to give a “you are here” effect.

We can give a notification effect a little animation with the fourth utility, .animate-ping, a one-second animation from regular size and opacity to twice the size and 0 opacity, which gives a pretty effective signal pulse effect.

All of these are negated by .animate-none.

Transitions

In CSS, we can specify that one or more properties should gradually transition when they change values, rather than changing instantly. In a client-side application, we might change values by using JavaScript to modify the CSS classes on an element. In Tailwind, we can use the prefixes to manage some CSS property changes merely in CSS. For example, an element with a class list of "bg-green-500 hover:bg-yellow-500" will change color from green to yellow when the user hovers over it. The Tailwind transition utilities can make that happen gradually.

In most cases, we declare an element to have a class of .transition, which causes the element to use transition effects for the CSS properties— background-color, border-color, box-shadow, color, fill, opacity, stroke, and transform. Oftentimes that’s all the properties we want to transition, but if we need to transition other properties, we can use .transition-all to place all properties under the transition banner.

Limit the transition

If we want to limit the transition to certain properties, Tailwind provides several choices. Typically we use these because there are changes in other properties that we want to happen instantly.

• .transition-color
• .transition-opacity
• .transition-shadow
• .transition-transform

For the transition to be visible, we need to specify the duration over which the transition will take place. The default is 0 (but can be changed in the Tailwind configuration). Tailwind provides the .duration-{milliseconds} family of utilities, where the suffix is one of 75, 100, 150, 200, 300, 500, 700, or 1000, indicating the number of milliseconds the transition should cover.

We can also delay the start of the transition with .delay-{milliseconds} and the same set of numbers, indicating the number of milliseconds before the transition should start.

By default, the transition is applied linearly, meaning the change to the property happens in a series of identically-sized steps. That default is denoted by .ease-linear. We can use .ease-in-out we want the property change to start more slowly, speed up, and then slow down as it gets closer to the end. We can also use either .ease-in or .ease-out if we only want the slowdown on one side of the change.) The ease difference is subtle, but especially with motion, it can provide a sense of a change accelerating and then decelerating in a way that can look more natural and engaging.

We’ll try the following animation attributes in the playground below:

• transition-none with duration-500
• transform with transition-all with dely-500

Other structural attributes of buttons are provided in the code below: