Css3 animation on divs

Question

Here is a fiddle where there is a small css3 animation where there are 2 divs triggerBox controls the animation of another div the animateBox, It is working but once I rewrite the html from,

<div id="triggerBox"></div>
<div id="animateBox"></div>

to,

<div id="animateBox"></div>
<div id="triggerBox"></div>

It stops working, Can anyone help me up with the reason for this behavior?

And yes please do not give any solutions based on javascript unless its inevitable.

Answer 1

You are using a general sibling selector in your CSS. If you read it correctly, it works only if the #animatorBox is after the #triggerBox, and they must share the same parent.

https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors

Sorry to say, there is no previous sibling selector available at this moment.

Answer 2

Are you trying to achieve something like this?

<div id="animatorBox"></div>
<div id="triggerBox"></div>

#animatorBox {
    display:block;
    height:100px;
    width:100px;
    background-color:black;

}
#triggerBox {

    display:block;
    height:50px;
    width:50px;
    background-color:yellow;
    transition:all 1s ease;
}
#animatorBox:active ~ #triggerBox {
    width:10px;
}