Transitions are used to add effects to the elements. To create transition we need to mention 2 things: the property on which the effect would be added and the time duration for which the transition will be set. Some CSS transition properties are as follows:
If you miss specifying the duration, the transition function will not have any effect as the default value is set to 0.
Here is a description of all the CSS transition properties:
- transition: It is the shorthand property that sets the four basic transition properties in a single property.
- transition-delay: It is used for specifying a delay in the transition effect and is usually for a few seconds.
- transition-duration: It is used for specifying the seconds or milliseconds for which a transition effect occurs.
- transition-property: It is used for specifying the name of the CSS property for which the transition effect is applied.
- transition-timing-function: It is used for specifying the speed curve for the transition. Here are all the properties that it can take: ease (to have a slower start for the transition, then increase its speed in between and have a slower end), linear (it keeps the speed for the transition constant), ease-in (It starts the transition slowly), ease-in-out (It makes the transition to having a slower starting and ending), and cubic-bezier (n,n,n,n) (it allows defining the unique set of values in the function).
Online learning website
Online learning website.