小编GKa*_*nes的帖子

我已成功使用@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的大小时,我想让半透明底层不透明,但由于它是一个子元素,我无法弄清楚如何解决它.这可能吗？