As you see it on our card, if we hover over it,
the size immediately changes. So there is no transition,
no smoothening of this increase in size effect.
Typically when adding such transformation still,
you want to have a specific transition,
a specific way of how the initial state
of your element transits into the well
transformed state. So to say.
And for this, we need CSS transitions.
One note before diving into these,
the code required to implement the transition
is applied to the initial state of the element,
not on the event, triggering the transition.
This means, by going back to the code,
instead of adding the transition logic
to our hover pseudo selector here,
so this is the so-called triggering event,
we hover over the card container,
then something should happen.
The transition has to be defined in the card
container here in our case, so in the default
state of this card container.
Because only by defining the transition,
initially it can be applied
once the triggering event, so the hover effect
comes into play, so that's an important thing
to keep in mind, you define the transformation,
so to transform property on the state of the
element that transforms it,
the rest definition of the transition happens
in the initial state.
You'll see this in a few seconds, of course,
how it works. It's just important to keep
this difference in mind.
Now, back on the slide,
we can now have a quick look at what
such a transition looks like.
This is basically a complete definition
of a transition. As you see transition here
to the left written in white
is another normal property just
as transform was.
But this property is a so-called,
shortend containing four different
key areas that define a transition.
The first area is the orange one here.
This is the so-called property.
In our case, we have the transform property
because for our project, we want to add
a transition to the transformation
of our card container,
so here to the increase of the size
of this card container.
You can also add different properties here, though.
For example, we could also say that once
we hover over a certain element,
the background color should change.
We see this for example, here on our button.
If I hover over here, the background color
becomes blue and there we could also
add a transition. We will also have a
look at this, of course, but the idea here is
that the property definition here,
as a value in transition property
can be based on different properties,
transform is just an example here.
The second value we can define in the shortend
is the so-called duration.
Well, as the name indicates, how long
should the change of the property defined in the
first position here, take.
The third value to define is
the so-called timing function.
Timing function here is set
to ease out. That's not the default case.
Ease out here simply means that the transition
starts fast and ends slowly.
So ease out.
Ease in on the other hand
would mean that the transition starts
slow and then builds up speed.
The default value here would be ease,
this would be an evenly distributed
transition period.
You don't have to define this therefore,
but you can do so. And we will also do so.
The last value to define is the delay.
So this simply means if I hover over
the element here, in our example,
should the transition be immediately executed
and therefore also the transformation, our case,
or should it have a delay that we can define
right here in seconds.
This is how transitions work in theory.
Let's now add this transition logic
to our existing transformation on the hover
effect of the card container.
For this I'm back in the code, and as I said,
in contrast to the transformation,
the transition has to be applied to
the initial state, so here to our
card container class.
For this, we add the transition property,
as I said, it's a completely normal
property that we have. And the first thing
to define is the property that should be
affected by this transition.
And therefore I emphasize that,
that we have to define this transition property
on the initial state of the element.
Because here we want to define
the transition of our
transform property
that we use for our
hover effect on the card container class.
So in contrast to the transform property here,
which we define when the triggering event,
so this hover effect comes into play
or takes place.
The transition property has to be defined
for the element that wants to use this
transition later on, so here, for example,
for our transform effect.
Of course, this effect would then also
be available for nested elements.
So if you want to add a hover effect for
the H one element, for example,
further down, this would also work.
I'll show you this a bit later in this lecture though.
So in our case, we want to define the transition
of this transform property.
This means we cannot define the second value
in
this
property,
which was the duration of this transition.
And for this, I'll take a very long value
of two seconds, now, just to demonstrate this feature.
Now we have the timing function,
so if the transition should start fast and,
and slow or the other way around,
or it should be evenly distributed.
if we don't define anything here,
ease would be the default case,
but we can also use something like ease out,
for example, with that, it would start fast and,
and slowly, we'll also do this here.
And finally, we can optionally add a delay
for example of one second here,
I'll keep this for reference, we might get rid
of that delay though,
in a few seconds.
With this, we implemented the transition
with all our four values, so the property
it refers to
the duration
the timing function and the delay.
And by going back to the project
and by hovering over our card container,
you see that initially nothing is happening
and then we have a fast start,
but a slow ending of the transformation.
If I go back and maybe increase
the scale to 10% here, so one dot one,
then it should become even more obvious.
So let's change this and let's go back then.
And now I hover over the card, nothing happens,
now it starts fast and fades out slowly so to say,
so you can see it.
If we move away, this has a slight delay.
Then it becomes small,
again, if I hover over it,
it starts fast and, and ends slow.
For this, we can actually also get rid of our delay,
I don't think we need this here.
And also the period is way too long
I just go with a value of zero dot five seconds here,
because this makes it well a lot smoother, actually.
And by the way,
you can also find more information about the transition
property and also about different timing functions we have
attached to this lecture.
So let's go back once again
and let's see what this looks like.
Yeah. I think this looks all right.
Actually, we can't even make it a bit
smaller from the scale size.
So let's also go back to one dot zero five,
so 5%,
As mentioned before, we can also use
this transform effect, including the transition
on other elements, which are nested into
the card container in our case.
So for example, if I go down now to the
H one element
and here at a
hover pseudo class,
and basically cut out the transform property
from our hover effect for the card container
and paste this here,
if I now go back
then by hovering over our H one element,
can you see it?
The effect also takes place.
So this is what I meant before.
You have to define this transition logic
on the element you want to use it on,
but this also can be used in for elements
nested into this element where
the transition was defined.
Well in our case still,
we can actually cut this out again
and add it back to the card container hover effect
and we can also get rid of the H one hover
selector here.
Before we finish our transition
and transform logic, though,
there is one last thing that I would
like to show you,
and this is this property here
inside the transition property.
As mentioned, we are using a transform property
here for our purpose,
but we can also use other properties.
For example, instead of transform,
we could say that we want to change
our background color.
So we add this property here.
We can then quickly comment out
our transform property for the hover effect
because now instead of transform,
we want to use the background color property
for this transition.
So we could say
that the background color here,
so we just use the normal property
should change to yellow, for example,
which won't look good, but it will show
you easily how this works.
Now, in our project, if we hover over our card,
you'll see that the color
changes with this transition.
Can you see it? It's not an immediate change,
but it has this nice transition effect.
If I would go back and comment out,
the transition in the card container,
now save this and go back once again,
if I now hover over the card,
the color changes immediately,
and this doesn't look as smooth as it does
with the transition being added.
Let's go back though.
And let's comment this in here
and let's change the property
back to our transform property.
And let's also delete the background
color change in our
hover selector here,
and let's comment back in the transform property,
and, but now going back to the project,
you see that everything is as intended again.
What you could do now though is
you could add the same logic
we just had for the entire card.
So changing the background color
to our button here.
It's just a very small exercise,
but with that, you can quickly practice
how does transition logic works,
therefore now is your chance to pause the video
and to quickly implement this logic.
So make sure that the color change here
is a smooth process, not this direct
color change that we have at the moment.
So how did it go? Could you solve this little task?
I hope you could.
Let's quickly implement this on our own now.
So let's go back
and here was one little trap,
which you hopefully didn't fall into.
I hope you didn't add the transition property
here below our card container class selector,
because if you would add something like transition
and then whatever here
then, well, the cascading logic of CSS would,
well, kick in. And with that,
you would override your transformed
property up here.
So if you would add the background color property
like this, and then zero to five seconds,
for example, and ease out,
like we had it for the transformation.
Then by going back to the project
and by hovering over the card,
well, then the transition is gone.
So if this happened to you, be careful,
don't forget about the CSS principles
we learn about in this course so far,
so let's go back again to the code
and let's cut this newly created part out now.
And now we can go down
where to
two hour
button class, this one here,
here, we have to define it, as I said,
we have to define the transition property
on the initial state of our element.
So here, the transition property can be added.
Now we refer to the background color property,
which we use here
for the hover effect.
And with this in place and by going back,
you now see that we have the effect
for the entire card container.
And we also have it for our background color change
of the button.
So this was the little challenge,
and this was it with transformations and transitions.
As I said, these are the basics to make sure
you can use these concepts as part of creating
your layout, your look of the website,
therefore attached to this lecture
You can find more information about these topics
because we will dive into the logic behind
these little icons here now.