Skip to main content
CSS is fun and cool and I like it.
Article

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 several list items, and you wanted them all to move on hover, but each one offset with staggered timing?… Read article

Almanac

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 time value defined in seconds or milliseconds e.g. 1.3s or 125ms
  • A comma-separated list of time values, for defining separate delay values on multiple transitions for a single element e.g. 1s background-color, 350ms transform

The default value for transition-delay is … Read article

icon-link icon-logo-star icon-search icon-star