library - Modificar dinámicamente la animación del webkit con javascript.

javascript animation library

Question

Me gustaría usar la animación webkit con @ -webkit-keyframes pero poder modificar dinámicamente los valores de la regla, para que la animación no sea estática. Todas las muestras que encontré usan un @ -webkit-frames estático, ¿hay alguna forma de personalizar con Javascript?

Answer 1

Me gustaría poder dar crédito por esto, pero aquí hay un enlace a alguien que logró modificar una animación existente, en lugar de crear una nueva animación.

http://gitorious.org/webkit/webkit/blobs/438fd0b118bd9c2c82b6ab23956447be9c24f136/LayoutTests/animations/change-keyframes.html

He corrido esto para verificar que sí funciona.

EDITAR

Entonces ese enlace está muerto y ya no confío en Gitorious para mantener URLS, así que aquí hay un enlace a un JSFiddle que creé para responder una pregunta similar: http://jsfiddle.net/russelluresti/RHhBz/3/

Este contiene una secuencia de comandos para encontrar una animación existente, actualizar sus valores y asignarla a un elemento para que se produzca la animación. He probado esto en Chrome 18 y Safari 5.1

Answer 2

Tuve que crear una nueva regla de estilo en las hojas de estilo cargadas. Parece funcionar bien en Chrome 5.0.342.9 beta (al menos)

var lastSheet = document.styleSheets[document.styleSheets.length - 1];
lastSheet.insertRule("@-webkit-keyframes " + newName + " { from { top: 0px; } to {top: " + newHeight + "px;} }", lastSheet.cssRules.length);

y luego asigne el nombre de la animación usando element.style

element.style.webkitAnimationName = newName;