Create transition with TailwindCSS
<div class="flex w-32 h-12 bg-teal-700 hover:bg-teal-100 hover:w-40 transition-all duration-1000 ease-in-out">
Test
</div>
With CSS transitions, you can smoothly change the values of properties over a specified duration. For example you can change the background color, the size or shadow of an div
element on mose over event.
You can fine tune the transition in pure CSS with the following properties:
transition-property
- What CSS property to changetransition-duration
- How long should the animation betransition-delay
- When to start the animationtransition-timing-function
- How the speed curve should look like
With TailwindCSS you can use the predefined values or use arbitrary values in special cases.
transition-{properties}
duration-{amount}
delay-{amount}
ease-{timing}
For example by adding the Tailwind class transition
to your element it automatically adds the following CSS rules:
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
If you want to change the size of the element then the simple transition
class will not work as is doesn't handle the with and height properties. In this case you can use the transition-all
class as here:
<div class="flex w-32 h-12 bg-teal-700 hover:bg-teal-100 hover:w-40 transition-all duration-1000 ease-in-out">
Test
</div>
- Create blinking background with TailwindCSS
- Create a neon effect with TailwindCSS
- Rotate element with TailwindCSS
- Change SVG icon color with TailwindCSS
- Using :not in TailwindCSS
- Specify exact width value in TailwindCSS
- Set element width over 100% using Tailwind CSS
- Stretch children to fill horizontally
- Create a fixed navbar with TailwindCSS
- Use font from local files in TailwindCSS
- Make an element invisible in mobile size in Tailwind CSS
- Create a 20/80 grid with Tailwind CSS
- Select the nth child in TailwindCSS
- Add class to child when hovering on parent in TailwindCSS
- Fill the full height of the screen in TailwindCSS
- Create transition with TailwindCSS
- Create horizontal rule with text using TailwindCSS
- Set background image with TailwindCSS
- How to use CSS variables in TailwindCSS
- Center an absolute element in TailwindCSS
- Remove arrows from number input in TailwindCSS
- How to use !important in TailwindCSS
- Access child elements in TailwindCSS
- Select first child in TailwindCSS
- Create semi transparent background in TailwindCSS
- How to use calc() in TailwindCSS
- Add text shadow with Tailwind CSS