CSS如何以不同的方式转换(转换) parent 和 child

Question

澄清一下，我只想在 css 中创建一个“悬停”过渡，其中一个 DIV 的悬停状态为另一个 DIV 设置动画(我可以使用“~”选择器开始工作)。然后，在第二个 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) 在示例中，我将“baby”设置为不同的过渡时间，但您看不到它发生(这是我的问题)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.