The transition-timing-function (easing function) describes how intermediate values of the transition are calculated. Initial value is ease..box {
transition-timing-function: ease-in-out;
}.bouncy {
transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
}linearUniform, constant-rate progression.easeThe default value. Equivalent to cubic-bezier(0.25, 0.1, 0.25, 1).ease-inBegins slowly then accelerates. cubic-bezier(0.42, 0, 1, 1).ease-outStarts fast then decelerates. cubic-bezier(0, 0, 0.58, 1).ease-in-outSlow start and end with faster middle.step-startJumps to end value immediately. steps(1, start).step-endHolds initial value, jumps to end value at completion. steps(1, end).cubic-bezier()cubic-bezier(x1, y1, x2, y2) — custom curve. y values may exceed [0,1] for overshoot effects.steps()steps(n, position?) — divides the transition into n steps. position: jump-start | jump-end | jump-none | jump-both | start | end.linear()linear() — custom linear easing with 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
