ACSS Stagger Effect Impacting Child Elements

Hopefully, this is just the result of the new CSS animation features being experimental, but if you are using the stagger option, which is used to set a delay based on the sibling-index() of the child elements. Unfortunately, this delay seems to stick at the child level when you apply ot transformation behaviors, meaning that each child has a longer delay for hover effects. After some experimentation, I found an easy solution for on-hover-grow — unset the delay.

.on-hover--grow {
  &:hover {
    transition-delay: unset !important;
  }
}

.on-hover--grow {
  &:hover {
    transition-delay: unset !important;
  }
}

It seems odd because I’m not touching the original stagger rule — but:

• CSS transitions are state-based, not event-based
• The browser always uses the current computed value of transition-delay
• By changing it on :hover I’m effectively saying: “For this state, ignore the stagger timing.”