html css properties css-animations css-transitions

How to Apply Multiple Transitions and Animations Due to Overridden Declarations in CSS

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.

The main problem I'm facing is that despite having distinct selectors for different transitions and animations, some of them are not functioning as expected due to overridden declarations in the CSS.

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?

Solution

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:

Combine Transitions You can combine multiple transitions into a single transition property by specifying all the properties and durations separated by commas. Here's an updated version of your CSS code:

#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.

Use Different Selectors Alternatively, you can use different selectors for each property that needs a particular transition or animation. In this case, you can separate the width and height transitions into different selectors like this:

#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!