Maison  >  Article  >  interface Web  >  Un exemple d'introduction à la fonction de synchronisation d'animation en CSS3

Un exemple d'introduction à la fonction de synchronisation d'animation en CSS3

零下一度
零下一度original
2017-06-27 10:15:381759parcourir

animation-timging-function est principalement utilisée pour contrôler la vitesse de l'animation CSS du début à la fin.

  • linéaire : transition linéaire. Equivalent à la courbe de Bézier (0.0, 0.0, 1.0, 1.0)

  • facilité : transition en douceur. Equivalent à la courbe de Bézier (0,25, 0,1, 0,25, 1,0)

  • facilité : de lent à rapide. Equivalent à la courbe de Bézier (0,42, 0, 1,0, 1,0)

  • allègement : de rapide à lent. Equivalent à la courbe de Bézier (0, 0, 0,58, 1,0)

  • facilité d'entrée : de lent à rapide puis à ralentir. Équivalent à la courbe de Bézier (0,42, 0, 0,58, 1,0)

  • step-start : Équivalent aux étapes (1, start)

  • step-end : équivalent à steps(1, end)

  • steps([, [ start | end ] ]?) : Une fonction pas à pas qui accepte deux paramètres. Le premier paramètre doit être un entier positif précisant le nombre d'étapes de la fonction. La valeur du deuxième paramètre peut être start ou end, spécifiant le moment où la valeur de chaque étape change. Le deuxième paramètre est facultatif et la valeur par défaut est end.

  • cubic-bezier(, , , ) : Type de courbe de Bézier spécifique, 4 La valeur doit être dans l'intervalle [0, 1]

Ici, nous introduisons principalement les steps()

.heart{background-image: url('images/heart-sprite.png');-webkit-animation: animate 1s steps(28) infinite;animation: animate 1s steps(28) infinite;
}@keyframes animate {
  from {background-position: 0 0;}
  to {background-position: -2800px 0;}}

steps() Définissez le paramètre d'intervalle pour réaliser une transition étape par étape

Le premier paramètre spécifie le nombre d'intervalles dans la fonction temps (doit être un nombre entier positif)
Le deuxième paramètre est facultatif et accepte deux valeurs : start et end, spécifiant un changement d'étape au point de départ ou au point final de chaque intervalle, la valeur par défaut est end.

  • Vert clair = Pris en charge

  • Rouge = Non pris en charge

  • Rose = Partiellement pris en charge

Valeurs IE Firefox Chrome Safari Opera iOS Safari Navigateur Android Android Chrome
Values IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
Basic Support 6.0-9.0 2.0-4.0 4.0-42.0-webkit- 6.0-8.0-webkit- 15.0-29.0-webkit- 6.0-8.4-webkit- 2.1-3.0-webkit-#1 18.0-42.0-webkit-
10.0+ 5.0-15.0-moz- 43.0+ 9.0+ 30.0+ 9.0+ 4.0-40.0-webkit-
16.0+
Support de base
    6.0-9.0 2.0-4.0 4.0 -42.0-webkit- 6.0-8.0-webkit- 15.0-29.0-webkit- 6.0-8.4 -webkit- 2.1-3.0-webkit-#1 18.0-42.0-webkit-
    10.0+ 5.0-15.0-moz- 43,0+ 9,0+ 30,0+ 9.0+ 4.0-40.0-webkit- td>
    16.0+
  1. Dans certains scénarios, il y aura Mauvais comportement
  2. Certains navigateurs ne prennent pas en charge l'animation de pseudo-éléments, ou la prise en charge n'est pas suffisante. Essayez de ne pas utiliser de pseudo-éléments pour l'animation
  3. .

    Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

    Déclaration:
    Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn