Understanding Transition Delay Property in CSS

Hello guys.

Welcome to our CSS series.

In the last segment we had seen about CSS 3d transforms.

I hope you must have performed the practical on your own.

You must have practised and tried it.

Our today's segment is on transition delay property, even today's segment comes in advanced CSS, along with transition delay, we will also see how we perform the transition.

So, today we are going to totally focus on the transition, how we can perform it.

Like it is written here.

This property specifies the duration to start the transition effect.

The value of this property is defined as either seconds or milliseconds means when we use the transition delay, at that time how will our transition start, from where it will start and how much time it will last for.

This we will check, the values we will pass.

Like it is written here these values are given in seconds and milliseconds.

 But let's say if there is an element and I perform the transition on that.

Like hover for example, like on some element if I perform an hover on any div or element.

And I want that to change.

Let’s say if it's green it should become blue.

As soon as I hover on it my element will change the colour from green to blue.

But I want it to not happen quickly.

Means it should not happen within a fraction.

But it should happen slowly, gradually.

If it is green, then slowly it should change into blue.

So, this time that we have given that for changing the colour there should be this much time.

That is our delay so the gradual delay that happens in time that is our transition delay properties main work.

So, what is written over here, the CSS transitions are effects that are added to change the element gradually from one style to another style without using flash or JavaScript.

Usually this can happen with flash or JavaScript.

But CSS provides us with functionality that you can also do with the help of transition delay property.

So, we will do it in CSS with the help of the transition delay property.

Without using the transition delay, the animation will start with the hover on the element.

But using this CSS property, we can delay the animation.

It so happens here, if we apply this property, let's see if we're doing something on the hover property.

So, it will not happen quickly.

It will happen slowly.

So, this performance will look like an animation.

Like we perform an animation from one state to another.

So, it will go ahead in the form of an animation.

The default value of the transition delay property is zero.

Which means that this transition will occur immediately without any delay.

So, if we are not giving any value, the default property takes it as zero value.

So again, it will be the same thing that within fraction everything will be performed, so this will not happen if we perform transition delay.

So here syntax is given transition delay and then we have to simply give time.

But when we perform transition delay along with that, we also have to give Transition Properties.

There are a lot of transition properties, we will see them one by one.

Here we have only focused on transition, transition delay.

So, it's first value is time.

If you give time, it specifies the time in seconds or milliseconds, how much time this animation should last.

If you take the initial, it means the default value will be considered.

For example, zero and if you inherit the parent’s property will be passed on to the child.

But in this it is necessary that we should have applied the transition property to the patent.

So, these were our values.

Note, the negative value of the transition delay property will immediately start the transition effect.

Means we can give negative but here an example is also given.

The effect will be animated as though it had already begun.

Means if we have passed negative value on any transition.

So that will be performed very quickly, very fast, which indicates that it has already started.

For example, if I pass the time from zero to one second positively, zero to positive one.

So slowly from zero to one second, my transition will happen.

But let's say if I pass minus one.

So minus one goes from zero second backwards.

Means we are going in the past; we can say that instead of the future one second.

We are going in the past.

So, what will happen in this case, zero from default the browser we will consider that we are going in the past.

Means our animation has already started.

So, the effect will perform quickly.

The result that is for zero, the same result we will get in minus or negative values.

The positive value of this property causes the transition effect to start for the given time.

Means if we are giving positive values, we get proper results with the time.

We will perform an example so that this is probably clear to us.

Here we have taken an example, changing the colour of the division on hover.

If we want to change the colour of the division on hover, how can we do it?

Here we have written a transition delay in a small required style, we have written it here.

In which we have used transition property and transition duration as well apart from delay.

So, the transition delay is there.

And duration property is also there.

Property usually defines what is this property for, for example, we are changing the colour here.

That is the reason why this transition property has been named background colour, we can take some other name apart from this.

It is not mandatory that we have to take the background colour itself but the action that we want to perform on hover.

For example, it is written here div hover, background colour to be brown.

Means the property which is going to be changed from the current property.

Means my current property is background colour, light blue, I'm going to change it to brown.

So, my background colour will change.

So, to the transition property we have given the name background colour.

Duration means how much it should last for.

So, that is one second.

And how much should be the delay?

Which is our today's point, which is 0.5 seconds.

Duration defines that the transition that is there, it should get over in how much time.

 And transition delay defines how much delay we can add in it.

How slowly it should happen.

So, to perform this programme, first of all, we will open the sublime text, HTML, example transition daily program 1, save, transition1.html.

So, this is what we will do.

Basically, we want one division, on the hover we can change the colour.

So, what do we want?

We will take one h3.

Hover the div to change the colour.

And here we will take one div.

We have to not keep anything inside the div.

It's just simply a div, save, style.

We will give the body, we will give text align, centre.

Now we will open this program, okay.

So, this is our program, hover the div to change the colour.

Now we will go inside the division and give some style to the division.

We will give the same style as we have given in the example.

Like width, height, background and transition related.

So, let's say width, 100pixels, height, 100 pixels, background colour, initially we will take sky blue and now transition property.

Our property is related to background colour.

So, background colour, transition duration, the transition should last for one second and transition delay, means how much delay should be there, 0.5 seconds.

Okay.

Now we have written this transition.

But you can see that whatever we have seen in Division apart from that we have written something related to WebKit.

With the WebKit we have to use the same property, transition property, transition duration, transition delay.

The same thing with but with WebKit keyword.

Specifically for the Safari browser this is written.

There are some properties which we use in Chrome, Opera and Firefox.

Those properties as it is, are not supported in browsers like Safari and there are some other browsers as well.

So, in that case, we have to add a keyword here.

So, if the browser is Safari, for that we use WebKit.

But now there is a property which is working in Chrome, but not in Firefox.

In that case we will add a dash or hyphen and M O Z, MOZ.

Which indicates that the CSS is related to Mozilla Firefox.

So, this is a technique if a browser specific CSS comes if we are working with advanced CSS only then this scenario comes.

Some CSS don't perform alike in some browsers or it doesn’t give the result.

So, this is our case.

If any of our CSS is not working in Safari for that we can take WebKit and move ahead.

So even this we will add the same thing.

Our three properties, it will be useful to add a comment here for Safari browser and here hyphen webkit and hyphen.

This we have added.

Now we will go to when will the transition delay be performed?

When we will Hover on it.

We will save this program, reload.

So here comes our division.

But currently we are not getting anything on Hover.

Margin, so this has come in the centre so that it looks properly.

So, currently I'm hovering, nothing is happening.

So, now I will perform a hover on this division.

So div, hover, on hover I want that its background colour should change.

Currently it is sky blue.

So, let's say we will take red.

Okay now I'm removing this property temporarily.

So, now I'm hovering, quickly my colour changes from blue to red.

Now I will apply the transition property to it.

So, you can see that my colour changes from sky blue to red.

 But slowly.

Okay.

So, this is happening with the help of transition duration.

Reload, it is a little fast when I am removing the delay.

Let’s say that I uncomment the delay.

So, my animation is appearing slowly.

Let’s say I remove 0.5 and make it 1 second, reload.

So, the time increases even more.

Means 1 second after hovering, my colour is changing from sky blue to red.

So, this is our transition effect.

First of all, I took the transition property.

On what we have to perform the transition, that is background colour.

We have given the duration one second, that this should get over in one second.

And we had taken the delay of one second.

We will write it 0.5.

So, our transition will start after 0.5 seconds.

So, after starting from half a second, it will end at one second.

So, this is done, we will uncomment this as well.

This was our 1st program, which was on changing the colour on hover.

Now we will again go into our slide.

There is a second example, change the width of the division on hover.

Means we will take an example in which we will have changed the width.

So, let's say there is one more example.

The same example we will copy and paste it here.

Delay, example program 2.

We will only comment on this transition property that is there.

We will remove the webkit one.

Transition 2, save.

Okay.

Here comes our second program.

Here we have to change, hover the div to change the width.

Okay.

So, now nothing is happening on hover.

Now, we have to change the width.

Now, we will uncomment this portion.

In transition property we will take width and when we are hovering, at that time what do we have to change, width.

So, let's say currently my width is 100 pixels.

I want to make it 300 pixels.

So, what I'm doing is I'm taking a width, initially 100 pixels.

On hover I'll make it 300 pixels.

Transition property, duration and delay.

I'm keeping it as it is.

I will not make any changes in this.

The rest of the things, our webkit portion, I will add as it is.

Only in this background colour will we add width, save, reload.

So now I'm hovering on it.

So, you can see that my width is increasing from both the directions and it increases till 300.

So, from 100, I'm getting 300 width in both directions.

So, I'm getting the effect on hover.

When I'm removing the hover, it goes back to…my division comes back to its main position.

Means, again it shrinks.

So, this is happening after half a second delay, which is our transition delay property.

Along with this we are also learning transition, that is how we can perform transition.

Mainly transitions happen over hover.

There are sometimes transitions which we can perform without hover but currently we will see all the transitions on hover.

This was our example, change the width of the div on hover, so we have performed this.

Third is to rotate the division on hover.

Means if I'm hovering, my division should rotate, it should totally turn around.

So, for this what we will do?

We will generate almost similar programs, three, to rotate, degree, transition three.

Okay.

So, this will be our third program.

(repeat) So, what do we have to do in this?

We have to perform the rotation, currently we have copied the program.

So, all the old transitions are getting applied.

So, I will remove it, first of all we will remove the hover.

So, what do we have to do here?

When we hover our division.

I will save this.

Okay, fine.

So now nothing is happening.

So, it is perfect.

So, when I hover over my division, on hovering my division should rotate.

It should turn around, it should rotate.

This will be my main function.

Along with rotation, its width should also increase.

I even want that.

In transition property…earlier when we wanted to change the colour, at that time we had taken colour.

Now, when I wanted to change the width, we took width.

But currently we want to rotate it, we can write rotate here but now we will perform more than one thing at a time.

So, for example now we will use only the transition property.

Transition, that's it.

Now what do we have to do here?

We have to change the background colour as well.

So, let's say I take background here.

After the background colour, I have to define some properties at one time.

Like earlier we had taken transition duration, so transition is a shorthand way of defining the property.

So, if I'm giving the transition I can directly write one second in it, which indicates that within one second, my transition should get performed.

And now if we want to give more than one transition, even that we can give, for example, I want that my width should also increase.

So, I want my width to increase in one second.

Now I want that with the transition the height should also increase.

But my height should increase in two seconds.

My width is increasing in one second but height should increase in 2 seconds.

So, here height two seconds.

And at the end, it should be transformed.

As we are also rotating it at 360 degrees.

So, the rotate transform property is useful.

So, I want it to transform in two seconds.

So in total, my overall transition will get over in two seconds.

background colour will change in the first second.

Width will change in the first second.

Height will change in second, second, or 2 second.

And transform will happen in two seconds and then on all this I am putting a delay of 1.5 milliseconds.

We can use seconds as well and milliseconds.

So, now I am using milliseconds in this.

Okay.

Now let's say I have to hover.

We will remove all these properties from here.

Now on division hover.

First of all, I have to increase the width to 300.

As we have taken the width here.

We have to also change the background colour and height as well.

Let's say I will take the height 300 pixels, my background colour is earlier if it was Sky Blue, I will change it to brown.

Background colour has come, height and width has come, then is transformed.

Now to perform transform we will take here transform, rotate, since our question is on 360 degree.

Let's say I take here 360 degrees, after 360 degrees my width, height and background colour, everything has come.

Transform in one property in which maybe we have to use the webkit for Safari or the other browsers that we have.

So, this is our hover.

Temporarily I will comment this delay property, reload.

So, you can see that my division that is there, it’s height increases.

We will make this 200.

Okay.

So, on hovering it directly becomes from blue to red, heigh and with both increases.

Now I will uncomment the transition property in this and I will reload it.

So, you can see that my division is turning round and round and then transforming and when I'm removing it, it is coming to its normal position.

So, on hovering on to the division with rotation it performs and rotates 360 degrees.

Okay.

Means, if you see 360 degrees.

If you consider any one point, let's say this is my point, that point turns around 360 degrees and comes back there.

Let's say I write here 1, okay, okay.

So, this is my first point.

Now when I hover on it, my point will turn around and stop at its original position.

It means that every point of my square, division, each point is rotating at 360 degrees but we are seeing it rotating multiple times.

Because in total we have got four points, four corners.

Again.

So, this is how we can perform the division rotation here.

Okay, so this was our 360-degree rotation program.

So, back to the slide.

So, we have performed the rotation as well.

So, in today's segment, we learned about the transition.

How we can perform the transition from one point to the other.

So, this transition is also a part of the animation.

But this is not totally animation.

We learned about transition delay today.

He can give a key word Transition Property that we have learned.

And we have learned the transition duration property and if it is combined together.

So, if we combine it together, it is a transition.

So, in total three programs we have performed related to hover.

Make sure guys transition is fired on a certain event.

So, hover is such an event.

When we go on any division and with the hover effect our transition starts.

You can take any other event.

But mostly in all the even hover is used when we perform the transition.

So, guys, in today's segment if there is any question or query, there is any point that you have not understood.

You are doing a practical and finding some difficulty there.

You can tell us on forums.learnvern.com.

We will try to revert to all your questions and queries with solutions over there.

Our next segment is on CSS animation property.

Thank you.