CSS Transition explained
CSS Transition allow CSS properties to change from one value to another value over a period of time. This provides animation like change from one property value into another.
There are four properties that are used in controlling the behavior of CSS transition, and these are:
- Transition-property: This property is used to specify which CSS property to apply transition to in the selector.
- Transition-duration: This property specifies the time that it take the browser to transition a property.
- Transition-timing-function: This is the property that browser use to specify the speed to use between property change.
- Transition-delay: This property specifies time in seconds that browser should wait before triggering the transition.
All these properties can be combined into a small, and compact syntax. A shorthand syntax for CSS transition looks like this:
transition: transition-property transition-duration transition-timing-function transition-delay;
transition: background-color 2s ease 1s;
In this code above transition is going to be applied to a background-color property of the element with an id of #div1. The transition is going to take 2 seconds to complete, timing function is going to be ease, and the transition delay is going to be 1 seconds.
Three things to note about CSS transition.
The first thing is, the only required properties are the transition property that you need transition to be applied to, and the transition duration that is used to specify the length of the transition. So our above example can be written like this:
transition: background-color 2s;
The second thing is, the default transition-timing-function is the ease timing function, But timing function can be either one of these linear, ease-in, ease-out, ease-in-out, step-start, step-end. Another thing to note about transition-timing-function is we can use one these two function to define a custom timing function. The steps function which takes two arguments. The start and end values. The cubic-bezier function which takes four arguments, and their values must be in a range between 0 and. Learn more about transition-timing-function.
The third thing is, a CSS transition shorthand can include two transition properties. This is achieved by specifying the transition property names separated by white space.
transition: background-color, font-size 2s ease;
In this code above CSS transition is going to be applied into two properties; background-color and font-size and both these properties are going to share transition timing function of 2s and transition duration of ease.
Many CSS properties can be used as transition properties but not all of them. This is the list of all CSS properties that CSS transition can be applied to.
Code example of CSS transition in action.
In this example we are going to change the color of the div element when a user hovers a cursor on the div element.
//initial div1 styles without a cursor hover
transition: background-color 1s ease-in;
//div1 styles on a cursor hover
As you can see from the example above we change the color of #div1 from blue to red. The transition property -- need to be placed on the initial style of the element -- specify that the background should be changed from blue to red in 1s using the ease-in timing function.