How to Apply Multiple Transitions and Animations Due to Overridden Declarations in CSS #14846
-
|
I am currently working on a web project that involves adding transitions and animations to various elements using CSS. While attempting to apply multiple transitions and animations, I've encountered a challenge related to overridden declarations. Here's an example to illustrate the issue: <head>
<style>
body { display: flex; }
#sectionA {
width: 400px;
height: 400px;
background-color: #a55;
transition: width 0.5s;
transition: height 0.7s;
}
#sectionA:hover {
width: 200px;
height: 300px;
}
#sectionB {
width: 400px;
height: 400px;
background-color: #5a5;
animation: offHover 0.5s ease-in-out forwards;
}
#sectionB:hover {
animation: onHover 0.5s ease-in-out forwards;
}
@keyframes onHover {
from { width: 400px; height: 400px; }
to { width: 200px; height: 300px; }
}
@keyframes offHover {
from { width: 400px; height: 400px; }
to { width: 200px; height: 300px; }
}
</style>
</head>
<body>
<div id="sectionA">Section A</div>
<div id="sectionB">Section B</div>
</body>However, I've noticed that only the last defined transition or animation takes effect, while the previous ones are overridden. Even though each element has its own distinct selector and properties, some of the animations or transitions are not working as intended due to this overridden behavior. I expect each of these elements to exhibit the specified transitions and animations when triggered by user interactions or hover events. How can I successfully apply multiple transitions and animations to different elements, even when overridden declarations are present? Is there a specific approach or technique that I should consider to overcome this issue? |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
|
The issue you are experiencing is due to the fact that CSS overrides any previous declarations of the same property within the same selector. In your code example, the transitions for the width and height properties in #sectionA are being overridden by the last declaration of height transition. Similarly, the animations for #sectionB are being overridden when the element is hovered. To apply multiple transitions and animations to different elements without being overridden, you have a few options:
#sectionA {
width: 400px;
height: 400px;
background-color: #a55;
transition: width 0.5s, height 0.7s;
}
#sectionA:hover {
width: 200px;
height: 300px;
}By combining the width and height transitions together, both will take effect as expected.
#sectionA {
width: 400px;
height: 400px;
background-color: #a55;
transition: width 0.5s;
}
#sectionA:hover {
width: 200px;
}
#sectionA {
transition: height 0.7s;
}
#sectionA:hover {
height: 300px;
}By using separate selectors, you can ensure that both the width and height transitions are applied as intended. Hope this help! |
Beta Was this translation helpful? Give feedback.
-
|
The 1st option worked very well for me! Thanks for your prompt comment! 👍 |
Beta Was this translation helpful? Give feedback.
The issue you are experiencing is due to the fact that CSS overrides any previous declarations of the same property within the same selector. In your code example, the transitions for the width and height properties in #sectionA are being overridden by the last declaration of height transition. Similarly, the animations for #sectionB are being overridden when the element is hovered.
To apply multiple transitions and animations to different elements without being overridden, you have a few options: