Animating superposed elements with CSS Animations - css

Question

Hi StackOverflow community,
I am trying to produce an "Orbit" on-hover animation, where a number of div elements are stacked on top of one another and they have different sizes so I can play with the borders circling around the "planet" (ie: main element).
My problem though is that it seems like when I stack one div over another and both are supposed to be animated, only the front element plays the animation and not those under.
I thought a z-index property could fix this, but as I thought about this I just thought I'd be switching one animation for the other, since the one I'd elevate with the z-index would then become the front and cover the one element that's now below.
Here's some code:
#spinner {
position: relative;
display: inline-block;
margin: 50px;
width: 100px;
height: 100px;
background: #eee;
border-radius: 50%;
}
/* -- -- -- Spin Animation -- -- -- */
#spinner-1 {
position: absolute;
top: -4px;
left: -4px;
width: 100px;
height: 100px;
border-radius: 50%;
border: 4px solid transparent;
border-top-color: black;
border-bottom-color: black;
}
#spinner-1:hover {
animation: spin 2s linear infinite;
}
#keyframes spin {
0% {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(180deg) scale(1.2);
}
100% {
transform: rotate(360deg) scale(1);
}
}
/* -- -- -- Orbit Ring -- -- -- */
#spinner-4 {
position: absolute;
top: -8px;
left: -8px;
width: 110px;
height: 110px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #333;
border-bottom-color: #333;
border-left-color: #333;
}
#spinner-4:hover {
animation: spin-2 2s linear infinite;
}
#keyframes spin-2 {
0% {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(-180deg) scale(1.3);
}
100% {
transform: rotate(-360deg) scale(1);
}
}
}
<div id="spinner">
<div id="spinner-1"></div>
<div id="spinner-4"></div>
</div>
So, basically I want both spinner-1 and spinner-4 to execute their animation when I hover over the spinner. Any ideas?

Answer 1

Set the hover on their shared parent element.
#spinner {
position: relative;
display: inline-block;
margin: 50px;
width: 100px;
height: 100px;
background: #eee;
border-radius: 50%;
}
/* -- -- -- Spin Animation -- -- -- */
#spinner-1 {
position: absolute;
top: -4px;
left: -4px;
width: 100px;
height: 100px;
border-radius: 50%;
border: 4px solid transparent;
border-top-color: black;
border-bottom-color: black;
}
#spinner:hover #spinner-1 {
animation: spin 2s linear infinite;
}
#keyframes spin {
0% {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(180deg) scale(1.2);
}
100% {
transform: rotate(360deg) scale(1);
}
}
/* -- -- -- Orbit Ring -- -- -- */
#spinner-4 {
position: absolute;
top: -8px;
left: -8px;
width: 110px;
height: 110px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #333;
border-bottom-color: #333;
border-left-color: #333;
}
#spinner:hover #spinner-4 {
animation: spin-2 2s linear infinite;
}
#keyframes spin-2 {
0% {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(-180deg) scale(1.3);
}
100% {
transform: rotate(-360deg) scale(1);
}
}
}
<div id="spinner">
<div id="spinner-1"></div>
<div id="spinner-4"></div>
</div>