All language subtitles for 004 Using CSS Animations_en

In the last lecture we added css transitions,

now one obvious thing we can use instead is a css animation.

Now in case you're not aware, a css animation also has nothing to do with react as css animation simply

allows you to define a bit of a more complex and controlled animation than with the transition prop

because with the transition prop, we are just saying hey whenever any property changes, animate that change

and figure out how to animate it on your own basically. Now an animation, a css animation is a detailed

described set of steps you want to execute,

for that you create so-called keyframes with @addKeyframes, then you give these keyframes any name of your

choice like openModal

and then here you can define the steps, so inside the animation in percentages or just with from and

to if you only got to but we could say we want to start at 0% and then that's the syntax, then we

want to have

a certain state at let's say 50% of the animation and we want to end with another state.

Now inside these states, you use normal css properties to describe how the object should look like

at this point of time. So since this is the open modal animation, we can say when opening it, we're starting at an

opacity of zero and we transform this to be moved up to the top.

Now let's say at 50% of the time, we want to have opacity of 1

so it's fully visible but we actually move this 20% to the bottom, so it's not in the final position

but actually moved a little bit too far down and only at 100%,

we move it to its final destination with translate 0.

Now with that, we can use open modal in our modal open class because this is the class which gets attached

when the modal should be shown

and I no longer need to set opacity and transform here, instead

here I call animation that's a special property which now allows us to define a set of keyframes which

should be executed whenever this css class is present on an element and that of course includes when

it is added to an element.

So here I want to execute the open modal animation,

then again we need to define a timing

So let's say we want to show this over .3 seconds

or maybe .4, then we also can define an ease-in function which defines how it moves between our individual

steps here

and we also have to define if it should repeat this animation or end at the state we end at in this

animation. If we don't define anything it would jump back to the starting state once the animation play

through,

if we want to keep the final state, so in 100% state we actually have to add the forwards value

here so that it keeps the final animation step.

Now with that, if we save this file and I click open modal, you'll see it bumps a little bit,

it slides down and then slides up,

do you see this tiny bump here,

that is because we push it 20% down after 50%.

You can't see it, let's simply increase this to 90% and that it should be really easy to see,

now if we open the modal you see it jumped on much further and then moved back up again.

So now we're using a css animation and we're taking advantage of the fact that this is simply

added or played

when this class is added.

Now for closing, we can of course also define a set of keyframes

so let's quickly add close modal here and now we want to play the opposite,

so we start at the opacity 1 and are at the position

well the element sits at, after 50%

we maybe have an opacity of let's say .8

so still quite visible but we slid this down a little bit and then after 100%, we got opacity

of 0 and we move this out of the screen with -100% on translateY.

Now we only need to use the close modal animation and like for modal open, we make sure that this gets

added whenever the modal close class is added,

so there we play the close modal keyframes set.

Now with that if we save this, let's see it in action, opening works as before, dismissing also now plays

our animation

and that is of course quite nice because now we're again controlling everything with css but we get

more controlled with the transition property because the css animation property allows us to

play our own set of keyframes which we do here.

And again this has nothing to do with react but it is important to recognize that this doesn't make

it worse or bad,

you can absolutely use that and in a lot of cases, css animations might give you all the power you

need to achieve certain animations or looks.