Skip to main content
CSS-Tricks
  • Articles
  • Alamanac
  • Guides
  • Videos
  • Books
  • Newsletter
Search

Articles Tagged
transition-delay

2 Articles
{
,

}
Direct link to the article Staggered CSS Transitions
hover nth-child Sass transition-delay

Staggered CSS Transitions

Let’s say you wanted to move an element on :hover for a fun visual effect.

@media (hover: hover) {
  .list--item {
    transition: 0.1s;
    transform: translateY(10px);
  }
  .list--item:hover,
  .list--item:focus {
    transform: translateY(0);
  }
}

Cool cool. But what if you had …

Avatar of Chris Coyier
Chris Coyier on Aug 14, 2019
Direct link to the article transition-delay
animation transition-delay transitions

transition-delay

The transition-delay property, normally used as part of transition shorthand, is used to define a length of time to delay the start of a transition.

.delay-me {
  transition-delay: 0.25s;
}

The value can be one of the following:

  • A valid
…
Avatar of Louis Lazaris
Louis Lazaris on Jul 19, 2013 (Updated on Aug 12, 2019)

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • About DO
  • Cloudways hosting
  • Legal stuff
  • Get free credit!
CSS-Tricks
  • Write for us!
  • Advertise with us
  • Contact us
Social
  • RSS Feeds
  • CodePen
  • Mastodon
  • X
Back to Top