- Trending Categories
- Data Structure
- Networking
- RDBMS
- Operating System
- Java
- MS Excel
- iOS
- HTML
- CSS
- Android
- Python
- C Programming
- C++
- C#
- MongoDB
- MySQL
- Javascript
- PHP
- Physics
- Chemistry
- Biology
- Mathematics
- English
- Economics
- Psychology
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
CSS3 Transition Shorthand Property
The transition shorthand property allows us to specify transition-property, transition-duration, transition-timing function and transition-delay as values to transition property in one line −
transition-duration − Specifies how many seconds or milliseconds a transition effect takes to complete
transition-property − The name of the property the effect is on
transition-timing function − The speed curve of the transition
transition-delay − Set the delay for the transition effect in seconds
Remember, you need to set the CSS property on which the effect is applied and the duration as well.
Let’s say we will convert a shape to oval on mouse over. For that, set a div −
<div class="container"> <div></div> </div>
Style the container with the transition −
.container div { width: 300px; height: 100px; border-radius: 1px; background-color: rgb(25, 0, 255); border: 2px solid red; transition: border-radius 2s ease 1s, background-color 2s ease-out 1s ; }
The Transition-duration
Above, the duration is set for the border-radius and background-color property. The transition-duration is set to 2 seconds −
2s for the border-radius property 2s for the background-color property
The Transition-delay
Above, the delay is set on the border-radius and background-color property. The transition-delay is set to 1 second and 2 seconds respectively;
1s for the border-radius property 2s for the background-color property
The Transition-timing-function
Above, the transition is set on the border-radius and background-color property. The transition-timing-function is set to −
ease for the border-radius ease-out for the background-color property
On hover, the shape will convert to oval since the border-radius is set to 50. The background-color will also change −
container:hover div { background-color: orange; border-radius: 50%; }
Example
The following is the code for the transition shorthand property in CSS −
<!DOCTYPE html> <html> <head> <style> .container div { width: 300px; height: 100px; border-radius: 1px; background-color: rgb(25, 0, 255); border: 2px solid red; transition: border-radius 2s ease 1s, background-color 2s ease-out 1s ; } .container:hover div { background-color: orange; border-radius: 50%; } </style> </head> <body> <h1>Transition shorthand property</h1> <div class="container"> <div></div> </div> <p>Hover over the above div to change its color and its shape to oval</hp> </body> </html>