First, I will cover transitions since transitions act as the foundation of animations because they specify the duration of an element changing its state smoothly over time. Without a transition this state change would be abrupt and take effect immediately. You will want to use transitions when using transforms in order to produce a smooth and gradual animation.
There are four transition properties, but only two are required:
- transition-property (required)
- transition-duration (required)
The transition-property specifies the property to be transitioned. You can apply a transition to an individual property like the border-color or to all the properties by specifying
The transition-duration specifies the time span of the transition. The duration can be declared as seconds (s) or milliseconds (ms).
The transition-timing-function specifies the speed of the transition over the duration. By default the timing is set to ease. Other pre-defined timing-function values include
step-end. You can create a custom speed by inserting your own values into a
cubic-bezier curve. Here is a cubic bezier playground that can help you visualize what the different speed of curves are like.