Home >Web Front-end >CSS Tutorial >Transition shorthand with multiple properties in CSS?
Transition shorthand with multiple properties in CSS?
- WBOYforward
- 2023-09-01 20:21:021009browse
We can add transitions to HTML elements using CSS. Before starting this tutorial, let's first understand what transitions are. Basically, a transition is when an element changes from one state to another. For example, we change the dimensions of an element when the user hovers over it.
In CSS, we can add transitions to elements in two ways. The first is to use the four properties "transition-property", "transition-duration", "transition-timing-function" and "transition-delay" at the same time. The second is to just use the "transition" CSS property.
The CSS "transition" property is shorthand for the following CSS properties.
Transition-property - It specifies the CSS property on which we need to apply the transition effect. If we need to apply transformation to all properties, we can use "all" as value.
Transition-duration - The total duration of the transition effect in seconds.
Transition-timing-function - It determines how the transition should proceed. Examples of transition timing functions are "liner", "ease-in", "ease-out", "ease-in-out", etc.
Transition-delay - This is the amount of time after the transition effect starts.
grammar
Users can use transition shorthand with multiple CSS properties according to the following syntax.
element {
transition: Property duration timing-function delay;
}
In the above syntax, the first value is the conversion attribute, the second value is the conversion duration, the third value is the timing function, and the last value is the conversion delay.
Example 1
In the example below, we have a div element with dimensions of 200 x 200, and we add a transition effect that lasts 2 seconds on the height of the div element. Here, the conversion delay is 0.5 seconds and the timing function is "ease-in-out".
Users can hover the mouse over the div element to observe the transition effect. We can observe that the height of the div element increases smoothly instead of 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 of the div element is 2px. When the user hovers over the div element, we increase the margin-left to 100px. We added a transition effect that delays 0.5 seconds and lasts for 2 seconds on the margin-left CSS property of the div element.
In the output, hover over the div element and it will move 100px to the right 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 add transition effects to multiple CSS properties. Here, we’ve added a 2-second transition effect for the “margin-left”, “height”, “width”, “background-color”, “color” and “font-size” CSS properties.
In the output, the user can observe that the transition of all CSS properties is smooth. However, we can use "all" as the value of "transition-property" to add transitions to all 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, which is shorthand for multiple CSS properties related to transitions. Here, we have learned to use the “transition” CSS property in the three examples above. In the previous example, we added transition effects to multiple CSS properties.
The above is the detailed content of Transition shorthand with multiple properties in CSS?. For more information, please follow other related articles on the PHP Chinese website!