The transition shorthand combines the four transition properties: property, duration, timing-function, delay. First time value = duration, second = delay. Multiple comma-separated transitions allowed..box {
transition: opacity 300ms ease-in;
}.box {
transition: transform 0.4s ease-out 0.1s, background-color 0.2s linear;
}min:0max:10000step:100units:ms | snoneFrom transition-property: no transition.allFrom transition-property: all animatable properties.easeEasing: fast start, slows toward end (default).linearEasing: uniform rate.ease-inEasing: slow start.ease-outEasing: slow end.ease-in-outEasing: slow at both ends.step-startEasing: jumps to end value immediately.step-endEasing: jumps to end value at the end.jump-startEasing (steps): jumps at the start of each interval.jump-endEasing (steps): jumps at the end of each interval.jump-noneEasing (steps): no jump at either end — first and last values are held.jump-bothEasing (steps): jumps at both the start and end.startEasing (steps): alias for jump-start.endEasing (steps): alias for jump-end.normalFrom transition-behavior: default — only animatable properties transition.allow-discreteFrom transition-behavior: enables transitions for discrete properties like display.cubic-bezier()Custom easing: cubic-bezier(x1, y1, x2, y2).steps()Easing: steps(n, position?) divides into steps.linear()Easing: linear() with custom control points.CSS Transitions Module Level 1Working DraftW3CMDNHover over meShow all codeEdit CSS onlineThe plugin that remembers hundreds of CSS items for youEvery CSS property — in a live demonstrationThe bilingual CSS referencedefinitionexamplessyntaxmodulespecificationsourcesvisual demonstrationpreviousnext
