How to use animations and transitions in Tailwindcss

Tailwind CSS provides several utility classes for adding animations to your web page. These classes are based on the animation-* property in CSS and allow you to specify the duration, delay, easing, and iteration count of an animation.

To use the animation classes in Tailwind CSS, you first need to define the animation by adding a @keyframes rule to your CSS. The @keyframes rule specifies the different stages of the animation and the styles that should be applied at each stage. Here is an example of a simple @keyframes rule that scales an element from 0% to 100% over the course of 1 second:

@keyframes scale {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

Once you have defined your @keyframes rule, you can apply it to an element by using the animation-* utility classes. For example, the following class will apply the scale animation to an element, causing it to scale up over the course of 1 second:

.scale-up {
  animation-name: scale;
  animation-duration: 1s;
}

You can use the other animation-* classes to specify the delay, easing, and iteration count of the animation. For example, the following class will cause the element to scale up and down twice, with a delay of 1 second and an easing function that starts the animation slowly and speeds up towards the end:

.scale-up-down {
  animation-name: scale;
  animation-duration: 1s;
  animation-delay: 1s;
  animation-timing-function: cubic-bezier(0.2, 0, 0.8, 1);
  animation-iteration-count: 2;
}

Transitions, on the other hand, are a way to smoothly change the value of a CSS property over a period of time, in response to a user interaction such as a hover or a click. Tailwind CSS provides utility classes for defining transitions based on the transition-* property in CSS.

To use the transition classes in Tailwind CSS, you first need to specify the CSS property that you want to animate, as well as the duration, delay, and easing of the transition. For example, the following class will create a transition for the background-color property that takes 0.2 seconds to complete, with a delay of 0.1 seconds and an easing function that starts the transition slowly and speeds up towards the end:

.bg-transition {
  transition-property: background-color;
  transition-duration: 0.2s;
  transition-delay: 0.1s;
  transition-timing-function: cubic-bezier(0.2, 0, 0.8, 1);
}

You can then use this class to add a transition to an element by applying it to a state change, such as a hover or focus state. For example, the following CSS will cause the background color of an element to smoothly transition to red when the element is hovered over:

.bg-red-500:hover {
  background-color: red;
}

Guillaume Duhan