You should be familiar with most of the properties, but keep them organized as they may not be remembered during development.
Transition attribute
| Propeties | Explanation | Example |
|---|---|---|
| transition-property | Targeting the transition | transition-property: width, height |
| transition-duration | Targeting the transition | transition-property: width, height |
| transition-timing-function | Targeting the transition | transition-property: width, height |
| transition-delay | Targeting the transition | transition-property: width, height |
| transition | Targeting the transition | transition-property: width, height |
transition properties
| Propeties | Explanation | Example |
|---|---|---|
| all | All properties are transition targets. Default | transition : all |
| none | No properties change during transition | transition : none |
| property name | Specify the properties to apply the transition effect (background color, width, height, etc…) | transition : width, height |
transition-timing-function properties
| Propeties | Explanation | Example |
|---|---|---|
| ease | Start slowly at first, get faster, and finish slowly at the end. Default | transition-timing-function : ease |
| linear | Progress at the same speed from start to finish. | transition-timing-function : linear |
| ease-in | Start slowly | transition-timing-function : ease-in |
| ease-out | End slowly | transition-timing-function : ease-out |
| ease-in-out | Starts Slowly Ends Slowly | transition-timing-function : ease-in-out |
| cubic-bezier(n,n,n,n) | Define and use a Bezier function. n value is used only between 0 and 1 | transition-timing-function : cubic-bezier(0.1, 0.5, 0.5, 0.2) |