How to create multiple transitions on an element using CSS ?
Last Updated :
24 Jul, 2024
In this article, we are going to learn how we can have multiple transitions on an element. Generally, we apply or create more than one transition to create some effects in our design. In CSS there are certain properties that can be transitioned.
Approach: To have multiple transitions on an element, basically we have two ways. One is specifying the properties to be transitioned, the time duration of the transition, and the timing function of the transition separately and let that work. Another way to implement this is to add all the details about the transition in a shorthand form where we add the property, time duration, and timing function of the properties and separate them with commas.
Transition keywords:
- transition: This keyword can be used with a CSS property in inline, internal, or external CSS. This needs the property (transition-property) which will be transitioned, the time duration (transition-duration) of the transition, timing(transition-timing-function) function of the transition. We can give those values individually to the property or we can use the shorthand technique to add all of them at the same time.
- transition-property: This is used to specify the properties to be transitioned.
- transition-duration: This is used to specify the time duration for which the properties will be transitioned.
- transition-timing-function: This is used to specify the time duration for which the properties will be transitioned.
The below example demonstrates the above approach.
Example 1: In the below-given code, we have added transitions to transform the color, border, padding-top and padding-bottom, and font size using the shorthand transition form.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<style>
h3 {
color: brown !important;
}
.container {
display: flex !important;
}
div {
font-family: "Lucida Sans", "Lucida Sans Regular";
font-size: 1rem;
margin: 2rem;
justify-content: center;
display: flex;
border: 10px solid green;
width: 18rem;
height: 7rem;
padding-bottom: 20px;
padding-top: 20px;
transition: color 1s ease-out, padding-top 1s ease-out,
padding-bottom 1s ease-out, font-size 2s ease-out;
}
div:hover {
color: rebeccapurple;
border: 10px solid brown;
padding-top: 100px;
padding-bottom: 30px;
font-size: 1.8rem;
}
</style>
</head>
<body>
<h1 style="color: green; margin: 2rem;">
GeeksforGeeks
</h1>
<h3 style="margin: 2.2rem; margin-top: -2rem">
How to have multiple CSS
transitions on an element?
</h3>
<div>GeeksforGeeks</div>
</body>
</html>
Output:
Example 2: In the below-given code we have added transitions to transform the color, border, padding-top and padding-bottom, font-size using the transition-property, transition-duration, and transition-timing-function separately:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<style>
h3 {
color: brown !important;
}
.container {
display: flex !important;
}
div {
font-family: "Lucida Sans", "Lucida Sans Regular";
font-size: 1rem;
margin: 2rem;
justify-content: center;
display: flex;
border: 10px solid green;
width: 18rem;
height: 7rem;
padding-bottom: 20px;
padding-top: 20px;
transition-property: color, border, padding-top,
padding-bottom, font-size;
transition-duration: 1s;
transition-timing-function: ease-out;
}
div:hover {
color: royalblue;
border: 10px solid grey;
padding-top: 100px;
padding-bottom: 30px;
font-size: 1.8rem;
}
</style>
</head>
<body>
<h1 style="color: green; margin: 2rem;">
GeeksforGeeks
</h1>
<h3 style="margin: 2.2rem; margin-top: -2rem">
How to have multiple CSS
transitions on an element?
</h3>
<div>GeeksforGeeks</div>
</body>
</html>
Output:
Similar Reads
How to apply multiple transform property to an element using CSS ? There is a variety of procedures to apply multiple transform property in an element. In this article we will discuss the easiest and popular ones. In the 1st method we will be combining the transform property itself. In the 2nd method, we will use the nested classes to apply other transforms. Method
3 min read
How to Create a Transition Effect on Hover Pagination using CSS ? In web development, pagination is a common feature used to navigate through a large set of data or content. Adding a transition effect on hover to pagination buttons can enhance user interaction and provide visual feedback. ApproachIn this approach, we are going to use CSS transitions. It enables sm
1 min read
How to create a Transitions popup using jQuery Mobile ? jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be creating a transition popup button using jQuery Mobile. Approach: Add jQuery mobile scripts needed for your project. <link rel=âstyle
2 min read
How to Create a Color Transition Effect in CSS ? Color transition in CSS smoothly blends colors, creating seamless transitions that captivate users and enhance the overall user experience. There are several methods to achieve color transition effects in CSS. These include CSS gradients, CSS animations, CSS variables, and CSS transitions. Use the b
2 min read
How to Transition Height from 0 to Auto using CSS? To transition height from 0 to auto in CSS, apply max-height with a transition effect. Using max-height allows for smooth expansion and collapse, making the element responsive while maintaining the animated effect.Creating Height Transition using max-heightTo create a height transition from 0 to aut
3 min read
How to add border to an element on mouse hover using CSS ? Adding a border to an element on mouse hover using CSS involves changing the element's border style when the mouse pointer is over it. This effect enhances user interaction by visually highlighting the element, achieved using the :hover pseudo-class to modify border properties.ApproachHTML Structure
1 min read
How to use Animation and Transition Effects in CSS ? With the help of CSS, you may design impressive visual effects for your website. Animation and transition effects are two common ways to add animation and visual effects to a web page. By attracting users' attention and directing them through your material, these effects may make your website more d
4 min read
How to Add Transition on Hover Using CSS? Transitions are the CSS technique used to create smooth changes between property values over a specified duration. By defining a transition, you can animate properties such as color, size, or position, making changes appear gradual rather than abrupt. For hover effects, transitions can enhance user
2 min read
How to Move an Element in a Circular Path using CSS ? In this article, we will see how to move an element in a circular path using CSS. Approach: We will create an HTML element, and add some CSS styles to it. We will use the animation property to add an animation effect to move the element in a circular path.Add some CSS styles to set the width, height
2 min read
How to create Neumorphism Effect using HTML and CSS ? Neumorphism (neomorphism) is a modern way of styling web-elements of any web-page and providing a 3D effect. This animation effect can be easily generated by using HTML and CSS. Box-shadow property of CSS can be used to implemented Neumorphism. It is used to add a dark shadow to one side and a light
2 min read