To clarify, I want to create a "hover" transition in css only, where the hover state of one DIV animates another DIV (this I can get to work using "~" selector). And then, animate(w/transition) multiple children inside of the second DIV.
It seems, that I cannot animate the child div if the parent is animated. Here's an example: a button to the left which upon hovering activates the transition/transform animation of the second div (a red half circle): (I want the two half-circles to rotate at different times (delay), and for different periods of time (duration))
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 note:
1)There must be positioning, visibility, and everything that's in that jsfiddle. 2)in the example, I have "baby" set to a different transition time but you cannot see it happen (this is my problem) 3)