CSS how to transition(with transform) a parent and child both, differently

Question

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)

Answer 1

In fact you have a wrong selector (which is .mommy:hover ~ .baby), so the animation for the .baby in fact does not run. Only the animation of the parent .daddy is run, it rotates and makes the inner child .baby also rotate. This effect made you think both animations run at the same time. Also because of this effect, I'm not sure what the exact effect you want. I've tried editing the code mainly to show that both animations can work right on the hovering:

/* This is what the selector should be */
.mommy:hover ~ .daddy > .baby {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  -webkit-transition: .1s ease-in .9s;
  transition: .1s ease-in .9s;
}

Demo.