能否在关键帧中设置子元素的属性

Question

我已经使用 @keyframes 成功地为 div 制作了动画，但我需要同时更改该 div 的子元素的属性。有没有办法从关键帧内寻址子元素？

HTML

<div class="layoutBlocks" id="layoutBlock1">
    <div class="Wrappers">
      <div class="transparentBG"> <!--semi=transparent underlay-->
    </div>
</div>
<div class="Wrappers">
    <div class="articles" id="article1">
        <table>
            <tr><th>heading</th></tr>
            <tr><td>article</td></tr>
        </table>
    </div>
</div>

CSS

#layoutBlock1 {
    left: 0%;
    top: 0%;
    width: 49.75%;
    height: 49.25%;
    -webkit-animation: LlB1 1s;
    animation: LlB1 1s;
}

@-webkit-keyframes LlB1 {
    0%   {width:50%; height:50%; z-index: 1;}
    100% {width:100%; height:100%; z-index: 100;}
}
@keyframes LlB1 {
    0%   {width:50; height:50%; z-index: 1;}
    100% {width:100%; height:100%; z-index: 100;}
}

（所有额外的包装器都是为了使半透明背景和圆角在Android上工作。）

（我认为这里的变换可能比关键帧更容易，但我的最终目标是添加更多效果。）

当我的关键帧移动并调整layoutBlock1 div的大小时，我想让半透明底层不透明，但由于它是一个子元素，我不知道如何解决它。这可能吗？

Answer 1

从关键帧寻址子节点是不可能的。

但是，可能会有一些黑客：

• 有另一个具有相同持续时间的动画，但具有子节点的动画和设置
• 实现此目的的另一种方法是使用一些 JS 库来实现动画。例如：https://animejs.com

Answer 2

您无法从关键帧内更改子元素，除非已在元素上调用该关键帧。您可以进行另一个动画，并且可以将其分配给子元素并将其设置为具有相同的持续时间。

如果您希望子元素发生相同的动画，您只需调用子元素上的关键帧即可。

Answer 3

我不知道这篇文章是否仍在更新，但有一个简单的方法可以很好地工作并回答问题，所以是的：您可以使用 css 变量。请参阅下面的示例：

:root {
    --child-height: 100%;
}
.child: {
    height: var(--child-height);
}
@keyframes parent-animation {
    /*... your animation*/
    to {
        --child-height: 50%;
    }
}