Syntaxe d'animation d'image clé - Astuces CSS

Anonim

Déclaration de base et utilisation

@-webkit-keyframes NAME-YOUR-ANIMATION ( 0% ( opacity: 0; ) 100% ( opacity: 1; ) ) @-moz-keyframes NAME-YOUR-ANIMATION ( 0% ( opacity: 0; ) 100% ( opacity: 1; ) ) @-o-keyframes NAME-YOUR-ANIMATION ( 0% ( opacity: 0; ) 100% ( opacity: 1; ) ) @keyframes NAME-YOUR-ANIMATION ( 0% ( opacity: 0; ) 100% ( opacity: 1; ) )
#box ( -webkit-animation: NAME-YOUR-ANIMATION 5s infinite; /* Safari 4+ */ -moz-animation: NAME-YOUR-ANIMATION 5s infinite; /* Fx 5+ */ -o-animation: NAME-YOUR-ANIMATION 5s infinite; /* Opera 12+ */ animation: NAME-YOUR-ANIMATION 5s infinite; /* IE 10+, Fx 29+ */ )

Par souci de concision, le reste du code de cette page n'utilisera aucun préfixe, mais l'utilisation dans le monde réel devrait utiliser tous les préfixes de fournisseur ci-dessus

Plusieurs étapes

@keyframes fontbulger ( 0% ( font-size: 10px; ) 30% ( font-size: 15px; ) 100% ( font-size: 12px; ) ) #box ( animation: fontbulger 2s infinite; )

Si une animation a les mêmes propriétés de début et de fin, une façon de procéder consiste à séparer par des virgules les valeurs 0% et 100%:

@keyframes fontbulger ( 0%, 100% ( font-size: 10px; ) 50% ( font-size: 12px; ) )

Ou, vous pouvez toujours dire à l'animation de s'exécuter deux fois (ou un nombre pair de fois) et indiquer la direction vers alternate.

Appel d'une animation d'image clé avec des propriétés distinctes

.box ( animation-name: bounce; animation-duration: 4s; /* or: Xms */ animation-iteration-count: 10; animation-direction: alternate; /* or: normal */ animation-timing-function: ease-out; /* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */ animation-fill-mode: forwards; /* or: backwards, both, none */ animation-delay: 2s; /* or: Xms */ )

Sténographie d'animation

Séparez simplement toutes les valeurs individuelles. L'ordre n'a pas d'importance sauf lorsque vous utilisez à la fois la durée et le délai, ils doivent être dans cet ordre. Dans l'exemple ci-dessous 1s = durée, 2s = délai, 3 = itérations.

animation: test 1s 2s 3 alternate backwards

Combinez transformation et animation

@keyframes infinite-spinning ( from ( transform: rotate(0deg); ) to ( transform: rotate(360deg); ) )

Animations multiples

Vous pouvez séparer les valeurs par des virgules pour déclarer plusieurs animations sur un sélecteur.

.animate-this ( animation: first-animation 2s infinite, another-animation 1s; )

Pas()

La fonction steps () contrôle exactement le nombre d'images clés qui seront rendues dans la période de l'animation. Disons que vous déclarez:

@keyframes move ( from ( top: 0; left: 0; ) to ( top: 100px; left: 100px; ) )

Si vous utilisez les étapes (10) dans votre animation, cela garantira que seulement 10 images clés se produisent dans le temps imparti.

.move ( animation: move 10s steps(10) infinite alternate; )

Le calcul fonctionne bien là-bas. Toutes les secondes, l'élément se déplacera de 10 pixels vers la gauche et de 10 pixels vers le bas, jusqu'à la fin de l'animation, puis de nouveau en sens inverse pour toujours.

Cela peut être idéal pour l'animation de spritesheet comme cette démo de simurai.

Prise en charge du navigateur

Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.

Bureau

Chrome Firefox C'EST À DIRE Bord Safari
4 * 5 * dix 12 5,1 *

Mobile / tablette

Chrome Android Android Firefox Android Safari sur iOS
88 85 4 * 6,0 à 6,1 *

Plus de ressources

  • Documents MDN
  • MDN: Utilisation de l'animation CSS
  • Puis-je utiliser - Prise en charge du navigateur
  • VIDÉO: Introduction aux animations CSS