Use transition-delay CSS property to specify when an effect will start on mouse-over

Share this video with your friends

Send Tweet

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."