So our last subject is now the shorthand, the transition shorthand, and basically what this means
is what we're going to cram in each and every functionality of our transition into one line.
And this would look lousy, something like this, because if you have a scaling, a rotation and a color
transformation.
So let me show you how this works.
First of all, let me target the div with the class typing class first with a class of shorthand.
Along with the changes, with the 150 pixels, and it's hard to also 150 pixels and a security background
color of dark.
Yeah.
Oh, sure.
Change to something else.
Let's go with this.
Just step in brown.
There we go.
Like, you know, our transition, basically something like this transition.
I keep forgetting the end transition, then comes a property.
So Trump then comes the duration of the property there, Dan, comma comes the timing function.
Which is easy, the easy is out funk, not funk, funk, and then comes the delay.
OK, so this is basically how a transition actually looks now.
We could do something like transition the way it should take.
So the property should take up two seconds.
I actually have to go with four seconds.
Four seconds.
The height transition.
Take up two seconds.
And scroll up a bit, the background color should take up two seconds.
The transformations of trans.
Transform should take up also two seconds.
And it should go with the easy out function duration.
A timely function, and it should have a delay of two seconds.
OK, so let's take our short hand, Dave, again.
That's Hollywood.
And let's start with wit, and they should go to Freelander pixels, then height, it should go to 400
pixels.
And because then the background color should turn red and you want to do here is a rotation, so let's
rotate, transform, rotate and let's rotated 180 degrees.
So let's take a look how this works, actually, to go here.
So let me holler with.
They should go down here, is going to change his background, colors, going to rotate, and it is
also going to scale.
Now, we could also do something like sort of hover active.
And what this actually does is this takes effect only when I hold a click and hold on this.
Sydney Sustainers, if you'll only click on it, then to do the back.
So as soon as I click and hold on the element, the transition is executed and as soon as I let go of
it, it goes back.
We could also do something like Target.
OK, so that's pretty much it about the short and also and about transition so soon, the next one by.