Use transition-delay CSS property to specify when an effect will start on mouse-over
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: [0:00] 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%.
[0:20] 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.
[0:29] 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.
[0:45] Let's try another value. Let's pick 5,000 milliseconds. That should be five seconds.
[0:51] 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.