The transition CSS property is shorthand for transition-property, transition-duration, transition-timing-function, and transition-delay.
object.style.transition = "value";
<'transition'> = <single-transition>#
<single-transition> = [ none | <single-transition-property> ] || <time> || <easing-function> || <time>
No property will transition.
<single-transition-property> = all | <custom-ident>
Indicates all properties are to be transitioned.
Specifies any valid identifier that is not misinterpreted as a keyword.
Defines how long of a delay there is between the start of the animation and when it begins executing.
Milliseconds. There are 1000 milliseconds in 1 second.
<easing-function> = linear | <cubic-bezier-easing-function> | <step-easing-function>
Its output progress value is equal to the input progress value for all inputs.
<cubic-bezier-easing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)
Equivalent to cubic-bezier(0.25, 0.1, 0.25, 1).
Equivalent to cubic-bezier(0.42, 0, 1, 1).
Equivalent to cubic-bezier(0, 0, 0.58, 1).
Equivalent to cubic-bezier(0.42, 0, 0.58, 1).
Specifies a cubic Bezier easing function. The four numbers specify points P1 and P2 of the curve as (x1, y1, x2, y2). Both x values must be in the range [0, 1] or the definition is invalid.
An integer or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits. The first character may be preceded by a sign (- or +). The last character may be succeeded by an exponent (e or E) and an integer.
<step-easing-function> = step-start | step-end | steps(<integer>[, <step-position>]?)
Computes to steps(1, start)
Computes to steps(1, end)
The first parameter specifies the number of intervals in the function. It must be a positive integer greater than 0 unless the second parameter is jump-none in which case it must be a positive integer greater than 1. The second parameter, which is optional, specifies the step position.
Specifies one or more decimal digits (0-9).
<step-position> = jump-start | jump-end | jump-none | jump-both | start | end
The first rise occurs at input progress value of 0.
The last rise occurs at input progress value of 1.
All rises occur within the range (0, 1).
The first rise occurs at input progress value of 0 and the last rise occurs at input progress value of 1.
Behaves as jump-start.
Behaves as jump-end.
transition-property | none
transition-property | all
transition-property | custom-ident
transition-duration | time
transition-timing-function | linear
transition-timing-function | cubic-bezier-easing-function | ease
transition-timing-function | cubic-bezier-easing-function | ease-in
transition-timing-function | cubic-bezier-easing-function | ease-out
transition-timing-function | cubic-bezier-easing-function | ease-in-out
transition-timing-function | cubic-bezier-easing-function | cubic-bezier
transition-timing-function | step-easing-function | step-start
transition-timing-function | step-easing-function | step-end
transition-timing-function | step-easing-function | step-position | jump-start
transition-timing-function | step-easing-function | step-position | jump-end
transition-timing-function | step-easing-function | step-position | jump-none
transition-timing-function | step-easing-function | step-position | jump-both
transition-timing-function | step-easing-function | step-position | start
transition-timing-function | step-easing-function | step-position | end
transition-delay | time
JS | transition-property
JS | transition-duration
JS | transition-timing-function
JS | transition-timing-function
JS | transition-delay
© 2021 Osbo Design