Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
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;
}
For multiple properties, use comma-separated values
element {
transition: property1 duration timing-function delay,
property2 duration timing-function delay,
property3 duration timing-function delay;
}
Example 1: Single Property Transition
In the example below, we have a div element of 500 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' ?
<!DOCTYPE html>
<html>
<head>
<style>
.element {
width: 500px;
height: 200px;
background-color: red;
color: white;
font-size: 25px;
padding: 20px;
transition: height 2s ease-in-out 0.5s;
}
.element:hover {
height: 400px;
background-color: green;
}
</style>
</head>
<body>
<h3>Using the transition property 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>
A red rectangle appears that smoothly grows in height and changes to green when hovered over. The transition takes 2 seconds to complete after a 0.5-second delay.
Example 2: Margin Transition
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 ?
<!DOCTYPE html>
<html>
<head>
<style>
.element {
width: 200px;
height: 200px;
background-color: blue;
color: white;
font-size: 25px;
margin-left: 2px;
border-radius: 12px;
padding: 20px;
transition: margin-left 2s ease-in-out 0.5s;
}
.element:hover {
margin-left: 100px;
}
</style>
</head>
<body>
<h3>Using the transition property 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>
A blue rounded square appears that smoothly slides to the right by 100px when hovered over. The movement takes 2 seconds after a 0.5-second delay.
Example 3: Multiple Properties Transition
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 ?
<!DOCTYPE html>
<html>
<head>
<style>
.element {
width: 200px;
height: 200px;
background-color: blue;
color: white;
font-size: 25px;
margin-left: 2px;
border-radius: 12px;
padding: 20px;
transition: margin-left 2s, height 2s, width 2s, background-color 2s, color 2s, font-size 2s;
}
.element:hover {
margin-left: 100px;
height: 300px;
width: 300px;
background-color: aqua;
color: black;
font-size: 35px;
}
</style>
</head>
<body>
<h3>Using the transition property of CSS to add transition to the element</h3>
<p>Hover over the below div to see the changes</p>
<div class="element">
Square div element.
</div>
</body>
</html>
A small blue square appears that smoothly transforms when hovered: it moves right, grows larger, changes to aqua color, switches text to black, and increases font size. All transitions happen simultaneously over 2 seconds.
Alternative: Using 'all' Property
Instead of specifying each property individually, you can use the 'all' keyword to apply transitions to all properties that change ?
<!DOCTYPE html>
<html>
<head>
<style>
.element {
width: 200px;
height: 200px;
background-color: purple;
color: white;
font-size: 20px;
margin-left: 10px;
border-radius: 10px;
padding: 15px;
transition: all 1.5s ease-in-out;
}
.element:hover {
width: 250px;
height: 250px;
background-color: orange;
color: black;
margin-left: 50px;
}
</style>
</head>
<body>
<h3>Using 'all' keyword for transition</h3>
<p>Hover over the div to see all properties transition</p>
<div class="element">
Hover me!
</div>
</body>
</html>
A purple square appears that smoothly transforms all its properties when hovered: size, color, position. The 'all' keyword makes every changed property transition over 1.5 seconds.
Conclusion
The CSS 'transition' property provides a powerful way to create smooth animations between element states. You can target specific properties individually or use 'all' to transition every changing property. Multiple properties can be transitioned simultaneously by separating them with commas.
790 Views
