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

Posted 2023-03-07

【中文标题】CSS如何以不同方式转换（使用转换）父母和孩子

【英文标题】：CSS how to transition(with transform) a parent and child both, differently

【发布时间】：2014-06-20 12:50:18

【问题描述】：

为了澄清，我只想在 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）

【问题讨论】：

不同的过渡时间这只是 transition-duration:.1s 和 transition-delay:.9s 看起来它们对我来说工作正常。你到底想要什么效果？

我想要的是两个半圆在不同的时间（延迟）和不同的时间段（持续时间）旋转。而且我似乎无法改变孩子的，因为它粘在父母身上。

说得更明白了，我已经找到了问题所在但具体效果还不清楚，请看下面我的回答。

【参考方案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.

【讨论】：

谢谢！我正在学习 css，但选择器仍然令人困惑。您的解决方案似乎确实有效，但在这里jsfiddle.net/dXCK6/5 我将 deg 设置回 0，它似乎没有动画。我想要的是让两个半圆的动画效果相同，但一个接一个，更慢或更快。

@PLCcory 你的初始变换是0deg，悬停使它变成0deg 那么它怎么能动画呢？请注意，触发转换的开始值和结束值之间应该存在一些差异。

是的，我犯了一个错误。感谢您的帮助并教我一个新的选择器。

@PLCcory 我想我知道你想要的效果，但正如我在答案中所说，旋转父级也旋转内部子级。这就是为什么很难获得您想要的效果（使用当前的 html），您的 .daddy 和 .baby 应该独立旋转，但现在旋转 .daddy 也会旋转 .baby .如果可能，您可以将.baby 放在.daddy 之外并正确定位。确实不是很好，但更容易得到你想要的效果。