Transition Shorthand

Shift between two CSS values in style and save time with the transition shorthand:

transition: margin-top 1s ease-in-out 0.5s;

Is equivalent to this:

transition-property: margin-top;
transition-duration: 1s;
transition-timing-function: ease-in-out;
transition-delay: 0.5s;

Use all as the property to affect all values at once. Define multiple transitions in the shorthand using comas:

.box {
  transition: margin-top 1s linear,
  margin-bottom 0.5s cubic-bezier(0,1.18,.87,.32),
  margin-left 2s;
}

Search

🔎 Searching...