Tengo una animación CSS simple:
<div id="saved-test"> <style type="text/css"> #saved-test { width: 40px; height: 40px; background: red; position: fixed; top: 0; left: 0; animation-name: move-to-bottom; animation-duration: 5s; z-index: 1000; } @keyframes move-to-bottom { to { left: 400px; top: 500px; } } </style>Esto funciona, y se mueve como quiero muy bien. El problema que tengo es que quiero establecer que el destino de este elemento sea diferente. Se "moverá" a una barra de navegación inferior, lo que significa que las posiciones izquierda/superior de destino variarán según el tamaño de la pantalla.
¿Es posible modificar el valor left y top en el keyframe a través de Javascript, para que vaya a una posición establecida que configuro dinámicamente?
Puede escribir el fotograma clave completamente con JavaScript como se muestra a continuación, lo que le permite usar valores dinámicos.
El método
animate()de la interfaz Element es un método abreviado que crea una nueva Animación , la aplica al elemento y luego reproduce la animación. Devuelve la instancia del objeto Animation creado. Más y el documento de MDN.
document.getElementById("saved-test").animate( [ // étapes/keyframes { left: "0px", top: "0px" }, { left: 400 + "px", // you can set it dynamically top: 500 +"px" // you can set it dynamically } ], { duration: 5000, iterations: Infinity } ); #saved-test { width: 40px; height: 40px; background: red; position: fixed; z-index: 1000; } <div id="saved-test">