Use transition-delay CSS property to specify when an effect will start on mouse-over
Share this video with your friends
Sometimes, you want an effect to have a delay before beginning its transition. To accomplish this, you can apply the "transition-delay" property in CSS to specify when a transition effect will start for an element. In this lesson, we utilize the "transition-delay" property to delay start of the transition effect on an element at mouse-over with the ":hover" psuedo-class.
The value is defined in seconds (s) or milliseconds (ms). So if you wanted a transition effect to start after 2 seconds, you would use "2s." For 5000 milliseconds (or 5 seconds), you would use "5000ms."
Hiro Nishimura: Here, I have an image with a rounded border. This image has a solid yellow border with border-width of 10 pixels and border-radius of 50%. At mouse over, effects are applied to the image. The border remains 10 pixels wide, solid and yellow, but the border-radius is changed to 25% and 50% and opacity changes to 50%.
As you can see, when I hover over the image, the effect is immediate. The image's border and opacity changes right as I bring my mouse over.
What if I wanted to delay the effect? I can come back to my CSS and type in transition-delay. Then you can set the value in seconds or milliseconds. I'll pick two seconds. Let's refresh the page and mouse over the image, one, two.
Let's try another value. Let's pick 5,000 milliseconds. That should be five seconds.
Let's refresh the page. One, two, three, four, five. By using the transition-delay property in CSS, you can specify when a transition effect will start. The value can be defined in seconds or milliseconds.