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
Transition shorthand with multiple properties in CSS?
We can add transitions to HTML elements using CSS. Before we start with the tutorial, let’s understand what transition is. Basically, the transition is an element changing from one state to another state. For example, we change the dimensions of the element when users hover over the element.
In CSS, we can add transitions to elements using two ways. First is to use ‘transition-property’, ‘transition-duration’, ‘transition-timing-function’, and ‘transition-delay’ all 4 properties together. The second is using only the ‘transition’ CSS property.
The CSS ‘transition’ property is shorthand for the below CSS properties.
Transition-property − It specifies the CSS property on that we require to apply the transition effect. If we require to apply transition on all properties, we can use ‘all’ as a value.
Transition-duration − It is the total time of transition effect in seconds.
Transition-timing-function − It determines how the transition should progress. Examples of transition timing functions are ‘liner’, ‘ease-in’ , ‘ease-out’, ‘ease-in-out’, etc.
Transition-delay − It is an amount of time after the transition effect should start.
Syntax
Users can follow the syntax below to use the transition shorthand with multiple CSS properties.
element {
transition: Property duration timing-function delay;
}
In the above syntax, the first value is transition property, the second value is transition duration, the third value is timing function, and the last is transition delay.
Example 1
In the example below, we have a div element of 200 x 200 dimensions, and we have added the transition effect on the height of the div element for a duration of 2 seconds. Here, the transition delay is 0.5 seconds, and the timing function is ‘ease-in-out’.
Users can hover over the div element to observe the transition effect. We can observe that the height of the div element increases smoothly rather than immediately.
<html>
<head>
<style>
/* adding transition effect on the element */
.element {
width: 500px;
height: 200px;
background-color: red;
color: white;
font-size: 25px;
transition: height 2s ease-in-out 0.5s;
}
.element:hover {
height: 400px;
background-color: green;
}
</style>
</head>
<body>
<h3>Using the <i> transition property </i> of CSS to add transition to the element</h3>
<div class = "element">
This div contains the texts.
<p> Hover over this div and wait to see the changes </p>
</div>
</body>
</html>
Example 2
In the example below, the initial margin-left is 2px for the div element. When the user hovers over the div element, we increase the margin-left to 100px. We have added the transition effect on the margin-left CSS property of the div element for 2 seconds after a delay of 0.5 seconds.
In the output, hover over the div element, which will move to the right by 100px in 2 seconds.
<html>
<head>
<style>
/* adding transition effect on the element */
.element {
width: 200px;
height: 200px;
background-color: blue;
color: white;
font-size: 25px;
margin-left: 2px;
border-radius: 12px;
transition: margin-left 2s ease-in-out 0.5s;
}
.element:hover {
margin-left: 100px;
}
</style>
</head>
<body>
<h3> Using the <i> transition property </i> of CSS to add transition to the element </h3>
<p> Hover over the below div and wait to see the changes. </p>
<div class = "element">
This div contains the texts.
</div>
</body>
</html>
Example 3
In the example below, we have added the transition effect for multiple CSS properties. Here, we have added a transition effect of 2 seconds for the ‘margin-left’, ‘height’, ‘width’, ‘background-color’, ‘color’, and ‘font-size’ CSS properties.
In the output, users can observe that it transitions smoothly for all CSS properties. However, we can use ‘all’ as a value of the ‘transition-property’ to add a transition to all the properties.
<html>
<head>
<style>
/* adding transition effect on the element */
.element {
width: 200px;
height: 200px;
background-color: blue;
color: white;
font-size: 25px;
margin-left: 2px;
border-radius: 12px;
transition: margin-left 2s, height 2s, width 2s, background-color 2s, color 2s, font-size 2s;
}
.element:hover {
margin-left: 100px;
height: 400px;
width: 400px;
background-color: aqua;
color: black;
font-size: 40px;
}
</style>
</head>
<body>
<h3> Using the <i> transition property </i> of CSS to add transition to the element </h3>
<p> Hover over the bellow div to see the achennges</p>
<div class = "element">
Square div element.
</div>
</body>
</html>
Users learned to use the ‘transition’ CSS property, a shorthand for the multiple CSS properties related to transition. Here, we have learned to use the ‘transition’ CSS property in the above three examples. In the last example, we have added the transition effect for multiple CSS properties.
418 Views
