[英]Css3 animation on divs
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, 这是一个小提琴 ,其中有一个小的css3动画,其中有2个divs TriggerBox控制animateBox的另一个div的动画,它正在工作,但是一旦我重写了html,
<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. 是的,除非不可避免,否则请不要给出任何基于javascript的解决方案。
You are using a general sibling selector
in your CSS. 您在CSS中使用了
general sibling selector
。 If you read it correctly, it works only if the #animatorBox
is after the #triggerBox
, and they must share the same parent. 如果你正确地读它,它的工作原理只有在
#animatorBox
是后#triggerBox
,他们必须共享相同的父。
https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors 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. 抱歉地说,目前没有
previous sibling selector
。
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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.