So in this movie, I am going to show you that how can animate your filters or visual effects. for that. Let me just go to my quatre. So here I am on my equator. And this is the last two images we can walk, which have a class of image two enemies three. So let me just go here.

And let me just target this image. And here, I'm gonna apply this filter, which is going to be grayscale. Well, I can choose any filter I want, but because I want to only admit it, so I chose this gray. So let me save it. And if I go here, you'll see that our second image is great. So what I want here is that when I hover over this image, it's actually revert back to its original color.

So for that, let me just go here, and here. I'm attacking this image to on how, and then what I want here is that when I hover around this image to I want this filter to be none. So yes, you can pass this non value to this filter property. This is going to remove any filter this image to have on how so if you go here, you see if I covered this one, it's going to get rid of that filter. You see it Returning back to its original color. But again, this video is all about animating this filter.

So what I want here is that when I hover over this one, it can smoothly transition back to its original color. Well for that, let me just go here. And then what I can do here, I can just go here, and I need to add only one property, which is transition. And then I need to see here within one second, and that's it. If I go here, and now 400. With this one, you see that it's a slowly transition back to its original color, which means it's take one second to get back to its original color, which is very smooth transparency.

So let's say if I add here a three seconds, so it will take three seconds to transition back to its original color. So if I go here, if I hold this one, see 123. Now see, it's transitioning back to this original color within three seconds, but this is not it. Let me show you. Let me just go here, and I'm gonna say transform. So this is the transform property.

And what we can do with this transform is that we can do a topic you can say skin x means it's going to make it you know, wider. So let's how Why do you want let's say I want here 1.2, which is 120%. And if I save it, and if I go here, you see, when I hover over this one, it's going to get wider. You see, it's 120% wider. And I think you did a fair you say, let's get back to here. Now, let me apply more complex effect.

So what I can do here is that I will go here, and I say add keyframes, because I'm gonna apply this animation, so is going to be keyframes, and the name of this keyframe is going to be changed colors in finite something, but I'll just keep changing colors. And here I just say on JIRA percent, just keep it normal. So it's going to be filter. Let's make it filter none right. So nothing is going to happen on JIRA percent. But as soon as I go to 10%, I want to change it something like let's say on grayscale, so let's see here, please scale and then when I go to this around 30% Then what will happen is that I want this image to be get higher contrast.

So I'm gonna see here the filter, and I want this higher contrast is going to be let's say 1.5, which is 150%. When I go to this 50%, then what I want here is that I want that image to have similar effects. I'm not saying filter is gonna be sepia. And now when I go to this around 70%, what I need here is that I want this filter to go brighter, so it's gonna be brighter, or let's go with invert, so I want it to be invert, so just inverted. And then when I reach this 90%, then what I want is that I want a drop shadow. So I'm gonna say a filter, and then apply a drop shadow.

And opposite is gonna be let's say two pixel on x axis to pixel on y axis and 10 pixels of blur or spread, and then we can apply here Color is going to be gold, right? So this is what exactly you're looking for. And let's actually make it 100%. Right. Now what I can do, I can just go up here, I can grab this animation name. And I can apply right here.

Yes, let me show you. So I can simply say animation. And now I can just existence color. And I want all this animation happening fast again. And in finite, and Africa here, you see that now we start seeing this animation, you see the same data in the world, then we have this drop shadow, then this gray, the original color, then Serbia again, invert, and so on, right? So this is very powerful.

And again, if you want to add some extra effect, like if you want to change it, you can do that, let's say is the grayscale, so in grayscale, what I want, is that, okay, I forgot that color hue, right. So we can apply some color hue. But I want to do something let's say I want this grayscale to be brighter. So I'm out here brightness, and it's going to be 200%. If I save it If I go here, you see that when we see that great claim, you very rarely see this very brighter, the gray is super bright. So let me show you, you see this is very bright.

Again, you can actually just take this multiple effect to create a more complex visual effect. Again, if you want to do something, let's say I want this to be here, rotate, so I want to rotate, it's a hue. And let's say 120 degree. Let's do it on this last one, and I'm gonna say here should rotate. And this time, I want to be 330 degree. And if I go here, you see that now we have in this, this here, rotate.

And then if I just go here, you see that we have this rotate and bless that drop shadow. So that's pretty powerful. And this is how you can actually just, you know put animation on your visual effect. And also you can change the filter to create more complex effect.