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
CSS
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
The transition property is a shorthand property used to represent up to four transition-related longhand properties: .example { transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay]; } These transition properties allow elements to change values over a specified duration, animating the property changes, rather than having them occur immediately. Here is a simple example that transitions the background