Estoy tratando de animar el ancho de un svg rect con el siguiente código.
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> La animación se está llevando a cabo, pero ¿cómo puedo ocultar el width de r1 hasta que la animación se active en los 2s (hasta el retraso)?
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>visibility cssEdit-2: mantiene la visibilidad después de los overs de animación)
Solución simple y fácil de cambiar animation-fill-mode: forwards; al animation-fill-mode: both; y ancho en px o %
.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>