CSS3 crée des animations via @keyframes

Cet article vous présente principalement les informations pertinentes sur l'implémentation de l'animation simple CSS3 @keyframes. L'éditeur pense que c'est assez bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

Définition :

L'animation peut être créée via les règles @keyframes.

Les animations sont créées en changeant progressivement un ensemble de styles CSS en un autre.

Cet ensemble de styles CSS peut être modifié plusieurs fois au cours du processus d'animation.

Précisez l'heure à laquelle le changement se produit en pourcentage, ou via les mots-clés "de" et "à", qui sont équivalents à 0% et 100%.

0% est l'heure de début de l'animation, 100% est l'heure de fin de l'animation.

Pour une meilleure prise en charge du navigateur, les sélecteurs 0 % et 100 % doivent toujours être définis.

Important : Problème de compatibilité ! @keyfrmes Non compatible avec IE 9 et les navigateurs antérieurs

Syntaxe :

@keyframes animationname {keyframes-selector {css-styles;}}

nom de l'animation

Obligatoire. Définit le nom de l'animation.

sélecteur d'images clés

animationname	必需。定义动画的名称。
keyframes-selector	必需。动画时长的百分比。 合法的值： 0-100% from（与 0% 相同） to（与 100% 相同）
css-styles	必需。一个或多个合法的 CSS 样式属性。

Obligatoire. Le pourcentage de la durée de l'animation.

Valeurs légales :

• @keyframes mymove
  {
      0%   {top:0px;}
      25%  {top:200px;}
      75%  {top:50px}
      100% {top:100px;}
  }
  
  @-webkit-keyframes mymove /* Safari and Chrome */
  {
      0%   {top:0px;}
      25%  {top:200px;}
      75%  {top:50px}
      100% {top:100px;}
  }
  //多个特性变化，用;隔开.
  
  @-webkit-keyframes mymove{
  
  0% {top:0px; left:0px; background:red;}
  25% {top:0px; left:100px; background:blue;}
  50% {top:100px; left:100px; background:yellow;}
  75% {top:100px; left:0px; background:green;}
  100% {top:0px; left:0px; background:red;}
  }

  0-100 %

• de (Idem comme 0%)

• à (Identique à 100%)

css -styles

Obligatoire. Une ou plusieurs propriétés de style CSS légales.

{
    animation:mymove 5s infinite;
    -webkit-animation:mymove 5s infinite; /* Safari and Chrome， infinite表示无限次循环，也可设置次数n：
                                           animation-interation-count:n*/ 
}

Utiliser la méthode d'animation mymove :

Sélecteur

Résumé : les @keyframes sont étroitement liées à l'animation. Si vous souhaitez la maîtriser à fond, vous devez apprendre à utiliser l'animation ensemble. Recommandations associées :

Créer des marqueurs de carte Google animés basés sur CSS et JavaScript_html/css_WEB-ITnose

jQuery Utiliser animate pour créer des exemples d'utilisation d'animation_jquery10 articles recommandés sur les images clés

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!