The transition-timing-function property, normally used as part of transition shorthand, is used to define a function that describes how a transition will proceed over its duration, allowing a transition to change speed during its course. .example { transition-timing-function: ease-out; } These timing functions are commonly called easing functions, and can be defined using a predefined
T
The transition-property property, normally used as part of transition shorthand, is used to define what property, or properties, you want to apply a transition effect to. This is done by providing the name of the property as the value: .example { transition-property: color; } The value can be one of the following: A single property
The transition-duration property, normally used as part of transition shorthand, is 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. .example { transition-duration: 3s; } The value can be one of the following: A valid time
The transition-delay property, normally used as part of transition shorthand, is used to define a length of time to delay the start of a transition. .example { transition-delay: 5s; } The value can be one of the following: A valid time value (defined in seconds or milliseconds) A comma-separated list of time values, for defining