Animation Properties

Transformation

CSS allows us to transform the box of an element in various ways, changing its size, location, rotation, or skew. Tailwind provides some reasonable defaults that are combined with transitions and animation to easily build some great effects.

All of these transformation utilities need to be combined with .transform, which in turn needs to be declared as a class in the same element—for example, "transform scale-100".

Changing the scale

Tailwind lets us change the scale of an element with the .scale-{percentage} family, where the suffix is the percentage to scale. The options are 0, 50, 75, 90, 95, 100, 105, 110, 125, and 150. These are designed to allow for subtle effects, such as "transform transition duration-1000 hover:scale-110". These are used to make an element get slightly bigger on hover over the course of a second. When we add in hover:box-shadow-lg, it seems like the element is getting closer to the user when they hover over it.

If we only want to scale in one direction, we can use .scale-x-{percentage} or .scale-y-{percentage} with the same set of numbers scale-x-95, scale-y-125, and so on.

Rotating

We can rotate an element with .rotate-{degrees}, which is a clockwise transformation of a number of degrees. The options are 0, 1, 2, 3, 6, 12, 45, 90, and 180. A counter-clockwise rotation is achieved with .-rotate-{degrees} and the same numbers.

The design here is to make it easy for small effects. The rotation is, by default, around an axis in the middle of the element, which Tailwind denotes as .origin-center. We can move the origin around by adding the suffixes for the same four directions and four corners that we have seen elsewhere to .origin-—for example, .origin-top, .origin-bottom-right, and so on).

Skew and translate

For skew, we have .skew-x-{degrees}, .-skew-x-{degrees}, .skew-y-{degrees}, and .-skew-y-{degrees}.These take the numerical suffixes 0, 1, 2, 3, 6, or 12 as the number of degrees in the skew.

We can flat-out move an element with .translate-x-{size}, .-translate-x-{size}, .translate-y-{size}, or .-translate-y-{size}, each of which takes a numerical suffix. This moves the element along the direction using the same number scale we have seen for padding, margins, and the like, where each number represents 0.25rem. Positive directions are right and down, and negative directions are left and up.

In addition to the number set, we have suffixes—px to move it a single pixel, full to move the exact amount of its size in that dimension, and 1/2 to move it half the amount of its size in that dimension. For example, we can use translate-x-full or translate-y-1/2.

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

• Create a button with color effects for transition with a duration of 500 milliseconds with a skew of 12​​ along the y-axis:

  • transition-color, duration-500, and skew-y-12

• Create a button with opacity effects for transition with a duration of 500 milliseconds with a scale by a factor of 125% along the y-axis:

  • transition-opacity, duration-500, and scale-y-125

• Create a button that is rotated by 45 and translated in the horizontal direction by the button’s size:

  • rotate-45, translate-x-full

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