My goal is to create a CSS-only "hover" transition where the hover state of one DIV animates another DIV and then animates multiple children inside the second DIV. It seems like I can't animate the child div if the parent is animated.
For example, consider a button on the left that, when hovered over, activates the transition/transform animation of the second div (a red half circle). I want the two half-circles to rotate at different times with different durations.
Check out the code snippet here: http://jsfiddle.net/dXCK6/2/
.mommy {
width:300px;
height:56px;
background-color:hsla(40, 50%, 60%, .6);
position:absolute;
left:240px;
}
.daddy {
visibility:visible;
width:170px;
height:170px;
border-radius:50%;
background-image: linear-gradient(90deg, hsla(10, 90%, 50%, 1) 50%, hsla(100, 90%, 50%, .0) 50%);
position:absolute;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transition:0s;
transition:0s;
}
.mommy:hover ~ .daddy {
visibility:visible;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .6s ease-in .2s;
transition: .6s ease-in .2s;
}
.baby {
width:150px;
height:150px;
border-radius:50%;
background-image: linear-gradient(90deg, hsla(5, 35%, 50%, 1) 50%, hsla(100, 90%, 50%, .0) 50%);
position: relative;
top: 10px;
left: 10px;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition:0s;
transition:0s;
}
.mommy:hover ~ .baby {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .1s ease-in .9s;
transition: .1s ease-in .9s;
}
Please remember:
1) The positioning, visibility, and other elements in the jsfiddle must be included. 2) In the current example, the "baby" has a different transition time but it's not visible happening (this is the issue).