Is it possible to set a property of a child in a keyframe

Question

I successfully animated the div using @keyframes, but I need to change the properties of the children of this div at the same time. Is there a way to access a child from a keyframe?

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;}
}

(All additional wrappers should make the translucent background and rounded corners work on Android.)

(I think transformations here may be easier than keyframes, but my ultimate goal is to add some more effects).

As my keyframe moves and resizes the layoutBlock1 element, I want to make the translucent underlay opaque, but since it is a child, I cannot figure out how to access it. Is it possible?