Can a property of a child element be set in a keyframe

Question

I have successfully animated a div using @keyframes but I need to alter properties of child elements of that div at the same time. Is there a way to address a child element from within 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 the extra wrappers are to make the semi-transparent background and rounded corners work on Android.)

(I think transforms might be easier than keyframes here but my ultimate goal is to add a few more effects down the line.)

As my keyframe moves & resizes the layoutBlock1 div, I want to make the semi-transparent underlay opaque, but since it's a child element, I can't figure out how to address it. Is this possible?

Answer 1

I don't know if this post is still update but there is a simple approach that will just work fine and answer the question, so Yes: you can using css variable. See the example bellow:

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