Transitions in CSS allows us to control the way in which transition takes place between the two states of the element. For example, when on hovering your mouse over a button, you can change the background color of the element with help of CSS selector and pseudo-class. We can change any other or combination of properties, though. Transition allows us to determine how the change in color takes place. We can use the transitions to animate the changes, and make the changes visually appealing to the user and hence, giving better user experience and interactivity. In this article, we will show you how to animate the transition between the CSS properties.
There are four CSS properties which you should use, all or in part (at least two, transition-property and transition-duration, is must), to animate the transition. All these properties must be placed along with other CSS properties of the initial state of the element:
- transition-property: This property allows you to select the CSS properties which you want to animate during transition(change).
transition-property: none | all | property | property1, property2, ..., propertyN;
- none is used to specify that no property should be selected.
- all is used to specify all the properties to be selected, though not all properties are animate-able, only the properties which are animate-able will be influenced.
- We can specify a single property or a set of comma separated properties property1, property2, …, propertyN.
- transition-duration: This property allows you to determine how long it will take to complete the transition from one CSS property to the other.
Here, time can be in seconds(s) or milliseconds(ms), you should use ‘s’ or ‘ms’ after the number (without quotes).
transition-timing-function: This property allows you to determine the speed of change and the manner of change, during the transition. Like, the change should be fast at the beginning and slow at the end, etc.
transition-timing-function: ease|ease-in|ease-out|ease-in-out|linear| step-start|step-end;
Note, there are other values which this transition-timing-function can take, only the most frequent and simple are mentioned here.
transition-delay: This property allows you to determine the amount of time to wait before the transition actually starts to take place.
Here, again, time can be in seconds(s) or milliseconds(ms), and you should use ‘s’ or ‘ms’ after the number (without quotes).
The Shorthand Property You can combine all the four transition properties mentioned above, into one single shorthand property, according to the syntax given below. This saves us from writing long codes and prevents from getting messy. Note the ordering of property, it has significance.
transition: (property name) | (duration) | (timing function) | (delay);
The value is taken by are same as mentioned above. This property must be placed with other CSS properties, if any, of the initial state. You should use at least, property name and duration to get any animate-able effect. Also, the ordering of the values matters. The first value is of the property name, second for the duration and so on, as listed above. So, if only one number is mentioned, it will be taken up as duration, and not as a delay.
Example: Changing property without using transitions.
Example: Changing property using transitions.
Supported browsers: The browsers supported by Transition are listed below:
- Google Chrome
- Internet Explorer
- How to get file input by selected file name without path using jQuery ?
- How to use mailto in HTML ?
- ES6 | Import and Export
- Node.js | fs.stat() Method
- Node.js | fs.rmdir() Method
- How to Create Background Like TV Noise in a Canvas ?
- How to Design Image Slider using jQuery ?
- How to Create a Cutout Text using HTML and CSS ?
- GraphQL | Scalars
- Difference between revert and unset keyword in CSS
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.