Shorthand way to use transitions for multiple properties in CSS?
Shorthand Ways to Use Transitions with Multiple Properties in CSS?
We can use CSS to add transition effects to HTML elements. Before we begin this tutorial, let’s first understand what transitions are. Basically, a transition is when an element changes from one state to another. For example, when a user hovers over an element, we change its dimensions.
In CSS, we can add transition effects to elements in two ways. The first method uses the “transition-property,” “transition-duration,” “transition-timing-function,” and “transition-delay” properties simultaneously. The second method uses only the “transition” CSS property.
The CSS “transition” property is a shorthand for the following CSS properties:
- transition-property – It specifies the CSS property to which we want to apply the transition effect. If we want to apply the transition effect to all properties, we can use “all” as the value.
-
transition-duration – This is the total duration of the transition effect in seconds.
-
transition-timing-function – This determines how the transition should proceed. Examples of transition timing functions include “liner,” “ease-in,” “ease-out,” “ease-in-out,” etc.
-
transition-delay – The amount of time after which the transition effect begins.
Syntax
Users can use the transition shorthand with multiple CSS properties using the following syntax.
element {
transition: property duration timer function delay;
}
In the above syntax, the first value is the transition property, the second is the transition duration, the third is the timer function, and the last is the transition delay.
Example 1
In the example below, we have a div element of 200 x 200 dimensions, and we’ve added a transition effect across the height of the div element with a duration of 2 seconds. Here, the transition delay is 0.5 seconds, and the timing function is “ease-in-out.”
The user can hover over the div element to observe the transition. Observe that the height of the div element increases smoothly, rather than instantly.
<html>
<head>
<style>
/* Add transition effects to elements */
.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>Use the CSS transition property to add transitions to elements</h3>
<div class = "element">
This div contains text.
<p>Hover over this div and wait for changes</p>
</div>
</body>
</html>
Example 2
In the following example, the div element has an initial margin of 2px. When the user hovers over the div element, we increase the margin to the left by 100px. We’ve added a transition effect to the margin-left CSS property of the div element with a duration of 2 seconds and a delay of 0.5 seconds.
In the output, when you hover over the div element, it will move 100px to the right over 2 seconds.
<html>
<head>
<style>
/* Add a transition effect to an 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>Add a transition to an element using the CSS transition property</h3>
<p>Hover over the div below and wait for changes. </p>
<div class = "element">
This div contains text.
</div>
</body>
</html>
Example 3
In the following example, we add transition effects to multiple CSS properties. Here, we set the transition effect for the “margin-left,” “height,” “width,” “background-color,” “color,” and “font-size” CSS properties to 2 seconds.
In the output, users can observe a smooth transition across all CSS properties. However, we could set “all” as the value for “transition-property” to add a transition effect to all properties.
<html>
<head>
<style>
/* Add transition effects to elements */
.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> Adding Transitions to Elements Using the CSS <i>transition Property</i> </h3>
<p>Hover your mouse over the div below to observe the changes</p>
<div class = "element">
Square div element.
</div>
</body>
</html>
Users learned to use the “transition” CSS property, a shorthand for multiple CSS properties related to transitions. We’ve learned how to use the “transition” CSS property in three examples above. In the final example, we added transition effects to multiple CSS properties.