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。）

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

随着我的关键帧移动＆amp;调整layoutBlock1 div的大小，我想让半透明的底层不透明，但由于它是一个子元素，我无法弄清楚如何解决它。这可能吗？

可以在关键帧中设置子元素的属性

0 个答案: