travailler avec les animations

Cet article nécessite une relecture rédactionnelle. Voici comment vous pouvez aider.

Cette traduction est incomplète. Aidez à traduire cet article depuis l'anglais.

Editer les @keyframes

Toute règles @keyframes associées avec l'élément sélectionné est maintenant affichée dans la Règle vu et est éditable:

Edition des fonctions de temps.

Quand vous créez une animation CSS vous pouvez spécifier une fonction de temps:

Cela détermine la vitesse à laquelle l'animation progresse. Une des façons pour définir une fonctions de temps est d'utiliser une courbe cubique de Bézier.

Les fonctions de temps défini comme courbe de Bézier ont une icône dans la Règle vu. Cliquer sur l'icône fera apparaitre un éditeur pour la courbe permettant de déplacer le P1 et le P2, et d'observer le résultat sur la page:

Cette nouveauté utilise le code open-source de Lea Verou’s cubic-bezier.com.

Firefox 39

Nouveauté de Firefox 39

A partir de Firefox 39, l'éditeur de courbe de Bézier inclut des pré-réglage:  "Ease-in", "Ease-out", et "Ease-in-out":

Inspecteur d'Animation

Firefox 37

A partir de Firefox 37, si l'élément selectionné est animé, l'inspecteur affichera un champs additionnel "Animations".

Cet outil affiche des informations à propos de l'animation et donne un bouton jouer/mettre en pause.

Firefox 38

A partir de Firefox 38, il y a une ligne supplémentaire en haut du panneau qui permet de mettre en jouer/mettre en pause tous les animations sur la page.

Ceci permet de rendre plus facile la selection d'un point particulier de l'animation.

Firefox 39

A partir de Firefox 39, l'Inspecteur d'Animation vous laisse la possibilité de faire une avance rapide et de vous rendre à un point précis de l'animation.

Firefox 40

A partir de Firefox 40, vous pouvez surligner et inspecter le noeud.

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : colibri83, maximelore, hutrd, MRdotB
 Dernière mise à jour par : colibri83,