⚠️ This lesson is retired and might contain outdated information.

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

Share this video with your friends

Social Share Links

Send Tweet
Published 4 years ago
Updated 2 years ago

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.

egghead
egghead
~ an hour ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today