'Hide SVG width till the animation-delay

I am trying to animate the width of a svg rect with the following code.

window.onload = function() {
    var viewBoxWidth = document.querySelector('svg').viewBox.baseVal.width;
    var rect1 = document.getElementById('r1');
    var rect1Width = rect1.getBBox().width;
    var pct = (rect1Width / viewBoxWidth) * 100;
    rect1.style.setProperty('--w1', pct + '%');
}
.r1 {
    animation-name: moveWidth;
    animation-delay: 2s;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-direction: normal;
    animation-fill-mode: forwards;
}

@keyframes moveWidth {
    0% {
        width: 0%;
    }
    100% {
        width: var(--w1);
    }
}
<!DOCTYPE html>
<html>

<body>
    

    <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">
    <rect class="r1" id="r1" x="10" y="10" width="200" height="20" stroke="none" fill="orange"></rect>
    <rect class="r2" id="r2" x="10" y="30" width="200" height="20" stroke="none" fill="green"></rect>
  </svg>
</body>

</html>

The animation is taking place but how can I hide the width of r1 till the animation kicks in at the 2s, (till the delay).

javascriptcsssvgcss-animations


Solution 1:[1]

Simple and easy solution change animation-fill-mode: forwards; to animation-fill-mode: both; and width into px or %

.r1 {
    animation-name: moveWidth;
    animation-delay: 2s;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-direction: normal;
    animation-fill-mode: both;
}

@keyframes moveWidth {
    0% {
        width: 0%;
    }
    100% {
        width: 200px;
    }
}
<!DOCTYPE html>
<html>

<body>
    

    <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">
    <rect class="r1" id="r1" x="10" y="10" width="200" height="20" stroke="none" fill="orange"></rect>
    <rect class="r2" id="r2" x="10" y="30" width="200" height="20" stroke="none" fill="green"></rect>
  </svg>
</body>

</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Neptotech -vishnu

Related Questions