динамически изменять анимацию webkit с помощью javascript

Question

Я бы хотел использовать анимацию webkit с @ -webkit-keyframes, но иметь возможность динамически изменять значения правила, чтобы анимация не была статичной. Все примеры, которые я нашел, используют статические @ -webkit-frames, есть ли способ настроить с помощью Javascript?

Answer 1

Мне пришлось создать новое правило стиля в загруженных таблицах стилей. Кажется, отлично работает в бета-версии Chrome 5.0.342.9 (по крайней мере)

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;

Answer 2

Хотелось бы поверить в это, но вот ссылка на того, кому удалось изменить существующую анимацию, в отличие от создания новой анимации.

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

Я запустил это, чтобы убедиться, что оно действительно работает.

EDIT

Так что эта ссылка мертва, и я больше не доверяю Gitorious поддерживать URL-адреса, поэтому вот ссылка на JSFiddle, который я создал для ответа на похожий вопрос:

Содержит сценарий для поиска существующей анимации, обновления ее значений и назначения ее элементу, обеспечивающему анимацию. Я проверял это в Chrome 18 и Safari 5.1