A simple guide to using tailwindcss transition-opacity

Introduction

Using transitions, you can easily implement soft, subtle animations.
Transitions let you create a design that’s a step above the rest.

How to use transition-opacity

To simply change an element’s opacity, use transition-opacity.
transition-opacity is defined internally like this.

<button className="opacity-100 hover:opacity-0 transition-opacity">🖥️ Software</button>

We got an animation that fades out softly.
If you want to change the fade-out speed, define something like duration-300 in className.\

transition-duration - Transitions & Animation

Utilities for controlling the duration of CSS transitions.

https://tailwindcss.com/docs/transition-duration

For background color

To change the opacity of a background color, it becomes a color transition, so use transition-colors.
In tailwindcss it’s defined like this.

You use it like this.

<button className="hover:bg-black hover:bg-opacity-5 transition-colors">🖥️ Software</button>

There are many other transitions as well.\

transition-property - Transitions & Animation

Utilities for controlling which CSS properties transition.

https://tailwindcss.com/docs/transition-property