- 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 −
Updated on 11-May-2020 09:53:59
- 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