CSS如何以不同方式转换（使用转换）父母和孩子

Question

为了澄清，我只想在 css 中创建一个“悬停”过渡，其中一个 DIV 的悬停状态为另一个 DIV 设置动画（我可以使用“~”选择器开始工作）。然后，为第二个 DIV 中的多个子项设置动画（w/transition）。

看来，如果父 div 动画，我无法为子 div 设置动画。这是一个示例：左侧的按钮在悬停时会激活第二个 div 的过渡/变换动画（红色半圆）：（我希望两个半圆在不同时间（延迟）和不同时期旋转时间（持续时间））

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;
}

请注意： 1）必须有定位，可见性以及该jsfiddle中的所有内容。 2）在示例中，我将“婴儿”设置为不同的过渡时间，但您看不到它发生（这是我的问题）3）

Answer 1

实际上你有一个错误的选择器（.mommy:hover ~ .baby），所以.baby 的动画实际上并没有运行。只有父 .daddy 的动画运行，它旋转并使内部子 .baby 也旋转。这种效果让您认为两个动画同时运行。也因为这种效果，我不确定你想要什么确切的效果。我尝试编辑代码主要以显示两个动画都可以在悬停时正常​​工作：

/* 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.