:privTri: Volpeon :areon3NSmol: (@volpeon)

The way it works is that I add transforms like transform: translateY(var(--footer--l1-y, 0px)); as necessary to the SVG elements. Then I use the following CSS on my website:

@property --footer--l1-y {
    initial-value: 0px;
    inherits: true;
    syntax: "<length>";
}

@keyframes footer-ani {
    from {
        --footer--l1-y: -200px;
    }
    to {
        --footer--l1-y: 0px;
    }
}

.footer {
    animation-name: footer-ani;
    animation-fill-mode: both;
    animation-duration: 1ms;
    animation-timeline: view(block 80% 0%);
    animation-timing-function: linear;
}