modifier dynamiquement webkit animation avec javascript

Je voudrais utiliser webkit animation avec @-webkit-keyframes, mais être capable de modifier dynamiquement les valeurs de la règle, de sorte que l'animation n'est pas statique.
Tous les échantillons que j'ai trouvé une utilisation statique @-webkit-cadres, il est un moyen de personnaliser avec du Javascript?

InformationsquelleAutor Arnaud | 2010-03-22
  1. 20

    J'ai dû créer une nouvelle règle de style dans le chargement des feuilles de style. Semble fonctionner à merveille dans chrome 5.0.342.9 bêta (au moins)

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

    et attribuer à l'animation de nom à l'aide de l'élément.style

    element.style.webkitAnimationName = newName;
    • Génial! qui a très bien fonctionné! merci!!!!
    • Je sais que c'est un peu en retard, mais quand même: comment pourrais-je l'utiliser sans affectation de l'animation à la fin? Je ne veux pas l'animation pour l'exécuter; je suis en utilisant addClass/removeClass pour démarrer les animations avec jQuery
    • une fois que vous avez une animation de nom, vous pouvez avoir une classe existante qui définit l'animation. dans votre feuille de style: .animate { -webkit-animation-name: newName;}
    InformationsquelleAutor case nelson
  2. 8

    Je souhaite que je pourrais le crédit pour cela, mais voici un lien à quelqu'un qui a réussi à modifier une animation existante, par opposition à la création d'une nouvelle animation.

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

    J'ai couru ce, afin de vérifier qu'il n'est, en effet, le travail.

    MODIFIER

    De sorte que le lien est mort et je n'ai pas confiance Gitorious pour maintenir des URL plus donc voici un lien vers un JSFiddle j'ai créé pour répondre à une question similaire: http://jsfiddle.net/russelluresti/RHhBz/3/

    Ce contient un script pour trouver de l'animation, de la mise à jour de ses valeurs, et de l'attribuer à un élément pour que l'animation se produire. J'ai testé cela en Chrome 18 et Safari 5.1

    • Ce lien est malheureusement mort, auriez-vous l'esprit la mise à jour?
    • Salut Russell, lorsque vous vérifié cela, les navigateurs qui ne vous test? Merci!
    • En raison d'une cascade de la création d'une nouvelle animation sera effectivement remplacer ceux existant avec le même nom.
    InformationsquelleAutor RussellUresti