CSS transition-property Property
Definition and Usage
The transition-property property specifies the name of the CSS property the transition effect is for (the transition effect will start when the specified CSS property changes).
Tip: A transition effect could typically occur when a user hover over an element.
Note: Always specify the transition-duration property, otherwise the duration is 0, and the transition will have no effect.
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 100px; background: red; transition-property: width; transition-duration: 2s; } div:hover { width: 300px; } </style> </head> <body> <h1>The transition-property Property</h1> <p>Hover over the div element below, to see the transition effect:</p> <div></div> </body> </html> |
Result
Hover over the div element below, to see the transition effect:
Property Values
| Value | Description |
|---|---|
| none | No property will get a transition effect |
| all | Default value. All properties will get a transition effect |
| property | Defines a comma separated list of CSS property names the transition effect is for |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
CSS transition-duration Property
Definition and Usage
The transition-duration property specifies how many seconds (s) or milliseconds (ms) a transition effect takes to complete.
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 100px; background: red; transition-property: width; transition-duration: 5s; } div:hover { width: 300px; } </style> </head> <body> <h1>The transition-duration Property</h1> <p>Hover over the div element below, to see the transition effect (the transition effect will lasts for 5 seconds):</p> <div></div> </body> </html> |
Result
Hover over the div element below, to see the transition effect (the transition effect will lasts for 5 seconds):
Property Values
| Value | Description |
|---|---|
| time | Specifies how many seconds or milliseconds a transition effect takes to complete. Default value is 0s, meaning there will be no effect |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
CSS transition-delay Property
Definition and Usage
The transition-delay property specifies when the transition effect will start.
The transition-delay value is defined in seconds (s) or milliseconds (ms).
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 100px; background: red; transition-property: width; transition-duration: 5s; transition-delay: 2s; } div:hover { width: 300px; } </style> </head> <body> <h1>The transition-delay Property</h1> <p>Hover over the div element below, to see the transition effect (Note that the transition effect will wait 2 seconds before starting):</p> <div></div> </body> </html> |
Result
Hover over the div element below, to see the transition effect (Note that the transition effect will wait 2 seconds before starting):
Property Values
| Value | Description |
|---|---|
| time | Specifies the number of seconds or milliseconds to wait before the transition effect will start |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
CSS transition-timing-function Property
Definition and Usage
The transition-timing-function property specifies the speed curve of the transition effect.
This property allows a transition effect to change speed over its duration.
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 100px; background: red; transition: width 2s; transition-timing-function: linear; } div:hover { width: 300px; } </style> </head> <body> <h1>The transition-timing-function Property</h1> <p>Hover over the div element below, to see the transition effect:</p> <div></div> </body> </html> |
Result
Hover over the div element below, to see the transition effect:
Property Values
| Value | Description |
|---|---|
| ease | Default value. Specifies a transition effect with a slow start, then fast, then end slowly (equivalent to cubic-bezier(0.25,0.1,0.25,1)) |
| linear | Specifies a transition effect with the same speed from start to end (equivalent to cubic-bezier(0,0,1,1)) |
| ease-in | Specifies a transition effect with a slow start (equivalent to cubic-bezier(0.42,0,1,1)) |
| ease-out | Specifies a transition effect with a slow end (equivalent to cubic-bezier(0,0,0.58,1)) |
| ease-in-out | Specifies a transition effect with a slow start and end (equivalent to cubic-bezier(0.42,0,0.58,1)) |
| step-start | Equivalent to steps(1, start) |
| step-end | Equivalent to steps(1, end) |
| steps(int,start|end) | Specifies a stepping function, with two parameters. The first parameter specifies the number of intervals in the function. It must be a positive integer (greater than 0). The second parameter, which is optional, is either the value “start” or “end”, and specifies the point at which the change of values occur within the interval. If the second parameter is omitted, it is given the value “end” |
| cubic-bezier(n,n,n,n) | Define your own values in the cubic-bezier function. Possible values are numeric values from 0 to 1 |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |