Native CSS animations, that is animations defined with the at keyframes keyword in CSS, are applied in the same way as CSS transitions, with the difference being that the enter from phase is not removed immediately after the element is inserted, but instead on the animation end event. What's most important to know about CSS animations is that most of the time we can simply declare them with keyframes, and then add that animation on the interactive and the leave active phases. view, that's exactly what I've done. In the template section, I have a transition component.
I've given it the name rubberband, provided a slot, and then defined the keyframes and added the animation appropriately. view, I've switched out my GSAP transition, with the rubber band transition. Let's see what that looks like in the browser. Cool.
That's something a little different. Keyframe animations allow us to add more steps than just the beginning and the end, as in transitions. In fact, we can add as many steps as we'd like by targeting different percentages of time during the animation duration. css.
css is a library that's quote, just add water CSS animations. If I refresh the page here, yeah, you can see the animate CSS in action. This is a super popular way of quickly adding animations to any project because there's so many different animations available. and they're all able to be applied with a simple set of CSS classes.
So for example, there is a bounce animation here. There's flash. Rubber band is actually the keyframes I stole and just put directly inside of our view component a moment ago. And we've got quite a collection of other a little bit more subtle transitions as well for fading out, fading in.
flipping, rotating in, rotating out, zooming entrances, zooming exits, sliding entrances and exits, and so much more over here. js transitions so that we don't have to write the keyframes ourselves? Let me show you. vue, I've imported the styles for use throughout my project.
js as well, it really doesn't matter. css classes. css classes to our transition component. So I'll remove all the manual CSS that we've created in our rubberband transition component, remove the name from our transition, and then we can start adding those custom classes.
So when you're working with animations, remember, typically you only have to target the interactive and leave active phases. So let's do that. I'll say interactive class equals, and then when you're working with animate CSS, you always want to add the class animate underscore underscore animated. That just tells the library that this element is going to be animated in some way.
Then you can get specific and tell it which animation you want to use. So I'll say animate underscore underscore rubber band. This is the animation we saw in the docs just a moment ago. Let me do the same exact thing, but for leave active now.
Perfect. Over in the browser, let's see what it looks like. Not bad. We get this rubber band in effect and out again, though the out is a little abrupt.
Why? css, but I cheated just a little bit. I added in some opacity changes between the 0% and the 50% level. That's because this rubber band transition provided by the library isn't meant to be a leaving transition.
However, plenty of leaving transitions do exist. We could use bounce out down. And then when I toggle it out, nice. There's also another one called fade out up.
And it works as you'd expect. And what about one of my favorites, zoom out down. Really cool. And of course there are in versions of all of these as well, such as zoom in down.
And then you can see it coming in and out in the same fashion. Plus there are a lot of other exiting and interesting transitions. as you saw when we were looking at the docs. But what if you still really wanted to rubber band in and rubber band out again?
Well, these are simple CSS animations and we can modify them by adding additional classes such as with Tailwind CSS as much as you'd like. So after a little bit of experimentation, this is what I came up with mixing the Animate CSS library and the Tailwind CSS library. That is pretty slick if you ask me. js.
Native CSS animations, that is animations defined with the at keyframes keyword in CSS, are applied in the same way as CSS transitions, with the difference being that the enter from phase is not removed immediately after the element is inserted, but instead on the animation end event. What's most important to know about CSS animations is that most of the time we can simply declare them with keyframes, and then add that animation on the interactive and the leave active phases. view, that's exactly what I've done. In the template section, I have a transition component.
I've given it the name rubberband, provided a slot, and then defined the keyframes and added the animation appropriately. view, I've switched out my GSAP transition, with the rubber band transition. Let's see what that looks like in the browser. Cool.
That's something a little different. Keyframe animations allow us to add more steps than just the beginning and the end, as in transitions. In fact, we can add as many steps as we'd like by targeting different percentages of time during the animation duration. css.
css is a library that's quote, just add water CSS animations. If I refresh the page here, yeah, you can see the animate CSS in action. This is a super popular way of quickly adding animations to any project because there's so many different animations available. and they're all able to be applied with a simple set of CSS classes.
So for example, there is a bounce animation here. There's flash. Rubber band is actually the keyframes I stole and just put directly inside of our view component a moment ago. And we've got quite a collection of other a little bit more subtle transitions as well for fading out, fading in.
flipping, rotating in, rotating out, zooming entrances, zooming exits, sliding entrances and exits, and so much more over here. js transitions so that we don't have to write the keyframes ourselves? Let me show you. vue, I've imported the styles for use throughout my project.
js as well, it really doesn't matter. css classes. css classes to our transition component. So I'll remove all the manual CSS that we've created in our rubberband transition component, remove the name from our transition, and then we can start adding those custom classes.
So when you're working with animations, remember, typically you only have to target the interactive and leave active phases. So let's do that. I'll say interactive class equals, and then when you're working with animate CSS, you always want to add the class animate underscore underscore animated. That just tells the library that this element is going to be animated in some way.
Then you can get specific and tell it which animation you want to use. So I'll say animate underscore underscore rubber band. This is the animation we saw in the docs just a moment ago. Let me do the same exact thing, but for leave active now.
Perfect. Over in the browser, let's see what it looks like. Not bad. We get this rubber band in effect and out again, though the out is a little abrupt.
Why? css, but I cheated just a little bit. I added in some opacity changes between the 0% and the 50% level. That's because this rubber band transition provided by the library isn't meant to be a leaving transition.
However, plenty of leaving transitions do exist. We could use bounce out down. And then when I toggle it out, nice. There's also another one called fade out up.
And it works as you'd expect. And what about one of my favorites, zoom out down. Really cool. And of course there are in versions of all of these as well, such as zoom in down.
And then you can see it coming in and out in the same fashion. Plus there are a lot of other exiting and interesting transitions. as you saw when we were looking at the docs. But what if you still really wanted to rubber band in and rubber band out again?
Well, these are simple CSS animations and we can modify them by adding additional classes such as with Tailwind CSS as much as you'd like. So after a little bit of experimentation, this is what I came up with mixing the Animate CSS library and the Tailwind CSS library. That is pretty slick if you ask me. js.