How To Set The Fadein Animation Time C#

Tailwind provides some elementary 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 uncomplicated animations are pretty cool; however, we may want to add some custom animations to our websites and applications. That'south elementary plenty 😉; allow'southward larn most how to do that.

Wiggle Blitheness

From the Tailwind documentation, they prove us how nosotros tin apply a simple wiggle animation by calculation 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)'            },                 }             },            blitheness: {            wiggle:            'wiggle 1s ease-in-out infinite',             }         },     },            variants: {},            plugins: [], }                  

We tin and so add the following HTML to our page and add the class animate-jerk to our element:

                      <div              class="flex justify-center items-center h-screen due west-screen">            <div              class="westward-10 h-ten bg-blackness breathing-wiggle">            </div>            </div>                  

And we'll encounter the following animation.

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

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

Fade In Downwardly Blitheness

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

Checkout our latest production - the ultimate tailwindcss page creator 🚀

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

If nosotros add together the following HTML to our page:

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

We volition end upwardly with the following animation:

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

Run across, animations are simple to create. Side by side, we can apply this same example animation to fade-out an element and change the direction.

A Few More Animations

Building on superlative of the previous fade-in-down animation from the previous footstep, we tin as well add the functionality to fade-out-down, fade-in-up, or fade-out-up.

Here is an case 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-downwardly': {            '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)'            },                 }             },            blitheness: {            'fade-in-downwards':            'fade-in-downward 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-upward':            '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-heart w-screen h-screen infinite-10-2">            <div              class="w-10 h-10 bg-black breathing-fade-in-downward">            </div>            <div              form="west-10 h-10 bg-black animate-fade-out-downward">            </div>            <div              form="westward-10 h-ten bg-black animate-fade-in-upwardly">            </div>            <div              course="w-x h-10 bg-black breathing-fade-out-up">            </div>            </div>                  

Nosotros'll stop up with animations that wait similar this:

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

At present, our elements are fading in, fading out, fading up, and fading down.

Conclusion

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

So, get forth! Exist Crawly. Create. And Breathing 🤓

Source: https://devdojo.com/tnylea/custom-animations-in-tailwindcss

Posted by: masonhimought.blogspot.com

Share this post