

- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- 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.
Following is the code for transition shorthand property in CSS −
Example
<!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: purple; border-radius: 50%; } </style> </head> <body> <h1>Transition shorthand property</h1> <div class="container"> <div></div> </div> <h2>Hover over the above div to change its color and its shape to oval</h2> </body> </html>
Output
The above code will produce the following output −
- Related Questions & Answers
- How to create CSS3 Transition Effects?
- CSS Transition property
- CSS Animation Shorthand property
- CSS transition-duration property
- CSS3 Opacity property
- CSS3 Resize Property
- CSS transition-timing-function property
- HTML DOM Style transition Property
- The padding shorthand Property in CSS
- The Background Shorthand Property in CSS
- The outline Shorthand Property in CSS
- The margin Shorthand Property in CSS
- The border Shorthand Property in CSS
- Usage of CSS transition-delay property
- CSS3 Multi-Column Property
Advertisements