Я хотел бы использовать анимацию webkit с @-webkit-keyframes, но в состоянии динамически изменять значения в правиле, чтобы анимация не была статичной. Все образцы, которые я нашел, используют статические @-webkit-frames, есть ли способ настройки с помощью Javascript?
Динамически модифицировать анимацию webkit с помощью javascript
Ответ 1
Мне пришлось создать новое правило стиля в загруженных таблицах стилей. Кажется, отлично работает в chrome 5.0.342.9 beta (по крайней мере)
var lastSheet = document.styleSheets[document.styleSheets.length - 1];
lastSheet.insertRule("@-webkit-keyframes " + newName + " { from { top: 0px; } to {top: " + newHeight + "px;} }", lastSheet.cssRules.length);
а затем назначьте имя анимации с помощью element.style
element.style.webkitAnimationName = newName;
Ответ 2
Жаль, что я мог бы счесть это, но здесь ссылка на человека, которому удалось изменить существующую анимацию, в отличие от создания новой анимации.
Я запустил это, чтобы убедиться, что он действительно работает.
ИЗМЕНИТЬ
Таким образом, ссылка мертва, и я не верю, что Gitorious будет поддерживать URLS больше, поэтому здесь ссылка на JSFiddle, которую я создал, чтобы ответить на аналогичный вопрос: http://jsfiddle.net/russelluresti/RHhBz/3/
Здесь содержится script, чтобы найти существующую анимацию, обновить ее значения и назначить ее элементу, чтобы сделать анимацию. Я проверил это в Chrome 18 и Safari 5.1