SVG animation diagonal viewbox - css

Question

I want to be able to make a design like this:
https://www.reddit.com/r/webdev/comments/bromkj/ello_everyone_this_is_a_ui_i_made_in_adobe_xd/
You can find my site at: El Paso Texas Graphic Design and Web Design | Desert Sun Studio
It's basic set up is having two fixed SVG's on different z-indexes on top of a orange HTML and body.
html, body{
margin: 0;
padding: 0;
font-family: "Oxygen", "Arial", sans-serif;
background-color: #A36D00;
}
#left-panel{
position: fixed;
z-index: 3;
animation-name: left-panelmove;
animation-duration: 200ms;
animation-fill-mode: forwards;
animation-delay: 500ms;
}
#right-panel{
position: fixed;
z-index: 4;
animation-name: right-panelmove;
animation-duration: 200ms;
animation-fill-mode: forwards;
animation-delay: 500ms;
}
You can see that the SVG's are masked as a rectangle when this animation runs:
#keyframes right-panelmove {
from {transform: translate(0, 0);}
to {transform: translate(15%, 10%);}
}
#keyframes left-panelmove {
from {transform: translate(0, 0);}
to {transform: translate(-15%, -10%);}
}
However you can see that I have my black square on my SVG's much larger than the artboard.
I was wondering if there was anything I can do to this code to make the SVG's run all the way across the screen diagonally, specifically to the viewbox:
<svg version="1.1" id="ab9dac86-5d7c-460b-b35e-9ae3db46aedc"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1920 1080"
style="enable-background:new 0 0 1920 1080;" xml:space="preserve">

Answer 1

#keyframes right-panelmove {
from {transform: translate(0, 0);}
to {transform: translate(15%, 10%);}
}
#keyframes left-panelmove {
from {transform: translate(0, 0);}
to {transform: translate(-15%, -10%);}
}
.left-panelmove{
animation-name: left-panelmove;
animation-duration: 200ms;
animation-fill-mode: forwards;
animation-delay: 500ms;
}
.right-panelmove{
animation-name: right-panelmove;
animation-duration: 200ms;
animation-fill-mode: forwards;
animation-delay: 500ms;
}
i moved the #keyframes and class to appropriate SVG (left and right) inside the SVG style tag and it worked perfectly.