- [Instructor] Another way to create animations
for your projects is to use a prebuilt library.
I like this one called animate.css.
It has a bunch of different options that work pretty well
and the way that it works is pretty simple.
You add an additional script or a reference to the CSS
and then you add a couple of classes to some HTML
that you want to animate
and it will apply those animations for you.
Now if you want to install it you can go
to View on GitHub over here and scroll down to this section.
Normally if you're just on a page,
you're just going to want to use this link tag.
If you want to just use an encode pen like we're doing,
we can just copy this reference to the CSS right here
and then we'll switch back over to codepen.
And remember, you go to Settings,
make sure you're on the CSS tab,
and then you can paste it or add it
as an additional resource.
I've already done that for you so you should already have it
but if not, just click add resource an paste it in there
and we'll go ahead and hit Save and Close.
And the way that you implement it,
is by modifying this transition tag.
So there's the tag right here
that we were working with earlier
and instead of using our normal name that we've been using,
we're going to just call this something else.
It doesn't really matter what you call it,
and you may see this kind of refreshing quite a bit,
so I'm just going to minimize it right now
so we don't get that, it gets a little annoying sometimes.
And then we are going to add a couple
of other properties here.
So enter active class will be what happens
at the beginning and here I'm going
to add the animated class
and this is the default way of identifying
that this HTML element will be controlled by animate.css
and then you add the animation name that you want.
And here you would type in the name that you saw
when you hit that dropdown on that animate.css website.
So I'm going to try fadeInDown and it's camelCase.
And then I'm going to add another one here
called leave active class
and here I'll type in animated once again.
And then I'll type in slideOutRight as my ending animation.
So clearly enter active is the beginning
and leave active is the end.
And then we just type in the different classes
that we want to add and delete here
as the animation takes place.
So now, when I click on this, you can see that it fades
in from the top,
so it's using this fadeInDown.
And then when we click on it again,
it pushes it to the right
and then it collapses everything.
So that gives you a lot of additional ways
to create animations without having
to write a lot of CSS yourself.