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?

Morena

a little sloppy on my copy&paste... layoutBlock1 width & height are 50%, not 49.whatever – Morena

Basically...no! Animations apply to the elements they are attached to. They cannot affect the properties of other elements directly. – Licastro

Can you not just animate the child at the same time as the parent? – Dhruv

Answer 1

Addressing the child node from the keyframe is not possible.

But, there might be a few hacks:

• Having another animation with the same duration, but with animation and settings for the child node
• Another way to achieve this is to use some of the JS libraries for animation. Eg.: https://animejs.com

Kristopherkristos

Answer 2

You cannot change a child element from within a keyframe unless that keyframe has been called on the element. You could have another animation going on, and you could assign that to the child element and set it to have the same duration.

If you want the same animation to happen to the child element, you could just call the keyframe on the child element.

Portfolio

Answer 3

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

Couperin