Custom Animations in TailwindCSS

Tailwind provides some simple animations out of the box. If you're not familiar with these animations, be sure to check out my post on TailwindCSS Animations here.

These simple animations are pretty cool; however, we may want to add some custom animations to our websites and applications. That's simple enough 😉; let's learn about how to do that.

Wiggle Animation

From the Tailwind documentation, they show us how we can apply a simple wiggle animation by adding the following keyframes, and animation properties to our Tailwind config:

module.exports = {
    theme: {
        extend: {
            keyframes: {
                wiggle: {
                    '0%, 100%': {
                        transform: 'rotate(-3deg)'
                    },
                    '50%': {
                        transform: 'rotate(3deg)'
                    },
                }
            },
            animation: {
                wiggle: 'wiggle 1s ease-in-out infinite',
            }
        },
    },
    variants: {},
    plugins: [],
}

We can then add the following HTML to our page and add the class animate-wiggle to our element:

<div class="flex justify-center items-center h-screen w-screen">
  <div class="w-10 h-10 bg-black animate-wiggle"></div>
</div>

And we'll see the following animation.

You can view a live demo of the animation here: https://play.tailwindcss.com/9imEThVLFd.

Pretty cool, right? Let's see how we can apply a few other custom animations to Tailwind.

Fade In Down Animation

We can use the same techniques as the wiggle animation and apply many other types of animations, such as a fade-in-down animation.

module.exports = {
    theme: {
        extend: {
            keyframes: {
                'fade-in-down': {
                    '0%': {
                        opacity: '0',
                        transform: 'translateY(-10px)'
                    },
                    '100%': {
                        opacity: '1',
                        transform: 'translateY(0)'
                    },
                }
            },
            animation: {
                'fade-in-down': 'fade-in-down 0.5s ease-out'
            }
        },
    },
    variants: {},
    plugins: [],
}

If we add the following HTML to our page:

<div class="flex justify-center items-center w-screen h-screen">
    <div class="w-10 h-10 bg-black animate-fade-in-down"></div>
</div>

We will end up with the following animation:

You can view a live demo of this animation here: https://play.tailwindcss.com/YE27rVbPCd

See, animations are simple to create. Next, we can apply this same example animation to fade-out an element and change the direction.

A Few More Animations

Building on top of the previous fade-in-down animation from the previous step, we can also add the functionality to fade-out-down, fade-in-up, or fade-out-up.

Here is an example of all those animations added to our tailwind config:

module.exports = {
    theme: {
        extend: {
            keyframes: {
                'fade-in-down': {
                    '0%': {
                        opacity: '0',
                        transform: 'translateY(-10px)'
                    },
                    '100%': {
                        opacity: '1',
                        transform: 'translateY(0)'
                    },
                },
                'fade-out-down': {
                    'from': {
                        opacity: '1',
                        transform: 'translateY(0px)'
                    },
                    'to': {
                        opacity: '0',
                        transform: 'translateY(10px)'
                    },
                },
                'fade-in-up': {
                    '0%': {
                        opacity: '0',
                        transform: 'translateY(10px)'
                    },
                    '100%': {
                        opacity: '1',
                        transform: 'translateY(0)'
                    },
                },
                'fade-out-up': {
                    'from': {
                        opacity: '1',
                        transform: 'translateY(0px)'
                    },
                    'to': {
                        opacity: '0',
                        transform: 'translateY(10px)'
                    },
                }
            },
            animation: {
                'fade-in-down': 'fade-in-down 0.5s ease-out',
                'fade-out-down': 'fade-out-down 0.5s ease-out',
                'fade-in-up': 'fade-in-up 0.5s ease-out',
                'fade-out-up': 'fade-out-up 0.5s ease-out'
            }
        },
    },
    variants: {},
    plugins: [],
}

If we apply each of those animation classes to our elements like so:

<div class="flex justify-center items-center w-screen h-screen space-x-2">
    <div class="w-10 h-10 bg-black animate-fade-in-down"></div>
    <div class="w-10 h-10 bg-black animate-fade-out-down"></div>
    <div class="w-10 h-10 bg-black animate-fade-in-up"></div>
    <div class="w-10 h-10 bg-black animate-fade-out-up"></div>
</div>

We'll end up with animations that look like this:

You can see a live demo of these animations by visiting https://play.tailwindcss.com/YeZIs0aejf

Now, our elements are fading in, fading out, fading up, and fading down.

Conclusion

We can apply any type of animation to Tailwind, and we can benefit by using any of the responsive or hover states along with our animations.

So, go forth! Be Awesome. Create. And Animate 🤓