Transition
The transition property allow elements to change values over a specified duration, animating the property changes, rather than having them occur immediately.
# Transition: (shortend property)
A shorthand property for setting the following properties in a single declaration: transition-property | transition-duration | transition-timing-function | transition-delay.
# Transition-Property
Used to define what property, or properties, you want to apply a transition effect to. propertyName / all / none
# Transition-Duration
Used to define the duration of a specified transition. That is, the length of time it will take for the targeted element to transition between two defined states. s (seconds).
# Transition-Timing-Function
Supported Values:
- linear: Transitions at an even speed.
- ease: The default value, increases in velocity towards the middle of the transition, slowing back down at the end.
- ease-in: Starts off slowly, with the transition speed increasing until complete.
- ease-out: Starts transitioning quickly, slowing down the transition continues.
- ease-in-out: Starts transitioning slowly, speeds up, and then slows down again.
- cubic-bezier(p1, p2, p3, p4): User defined curve, where the p1 and p3 values must be in the range of 0 to 1.
transition:
translate3d 2s linear
transition:
translate3d 2s ease
transition:
translate3d 2s ease-in
transition:
translate3d 2s ease-out
transition:
translate3d 2s ease-in-out
transition:
translate3d 2s cubic-bezier(.4, 1.5, .7, -.3)
# Transition-Delay
Used to define a length of time to delay the start of a transition. s (seconds).