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).
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 {
visibility:hidden;/*hide default*/
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% {
visibility:visible;/*show again*/
width: 0%;
}
100% {
visibility:visible;/*Edit-2 maintains visibility after animation overs*/
width: var(--w1);
}
}<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>visibilityEdit-2: maintains visibility after animation overs)
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>