Explication détaillée de l'utilisation de l'attribut d'animation en CSS3

Avant de commencer à présenter l'animation, nous devons d'abord comprendre une chose spéciale, à savoir les "images clés". Nous l'appelons "images clés". Les amis qui ont joué à Flash connaissent peut-être cette chose. Jetons un coup d'œil à ce qu'est cette « images clés ». Lorsque nous avons utilisé la transition pour créer un effet de transition simple plus tôt, nous avons inclus les attributs initiaux et finaux, un temps d'action de début et un temps d'action de continuation ainsi que le taux de transformation de l'action. toutes les valeurs intermédiaires. Si nous voulons Le contrôle est plus détaillé, par exemple, quelles actions je veux effectuer dans la première période et quelles actions je veux effectuer dans la deuxième période (passer au flash, cela signifie quoi actions que je veux effectuer dans la première image, et quelles actions je veux effectuer dans la deuxième image (quelle action), il nous est difficile d'utiliser Transition pour y parvenir. À ce stade, nous avons également besoin d'une telle « image clé ». à contrôler. Ensuite, CSS3 Animation utilise l'attribut "keyframes" pour obtenir cet effet. Jetons d'abord un coup d'œil aux images clés :

Les images clés ont ses propres règles de syntaxe, et son nom est donné par "@key

<br/>

frames" au début, suivi du "nom de l'animation" plus une paire d'accolades "{}". Entre parenthèses se trouvent quelques règles de style pour différentes périodes, un peu comme la façon dont nous écrivons les styles CSS. Pour une règle de style dans "@keyframes" composée de plusieurs pourcentages, par exemple entre "0%" et "100%", nous pouvons créer plusieurs pourcentages dans cette règle, et nous attribuons à chaque pourcentage un élément avec des effets d'animation. être ajouté avec différents attributs, afin que les éléments puissent obtenir un effet en constante évolution, comme le déplacement, le changement de couleur, de position, de taille, de forme, etc. Cependant, une chose à noter est que nous pouvons utiliser « fromt » et « to ». " représentent l'endroit où commence et se termine une animation. En d'autres termes, "de" équivaut à "0%" et "à" équivaut à "100%". Il convient de mentionner que, parmi eux, "0%" ne peut pas omettre le signe de pourcentage comme les autres valeurs d'attribut. Nous devons ajouter ici le signe de pourcentage ("%"). Sinon, nos images clés seront invalides et n'auront aucun effet. Parce que l'unité d'images clés n'accepte que des valeurs en pourcentage.

Les images clés peuvent être spécifiées dans n'importe quel ordre pour déterminer la position clé du changement d'animation d'animation. Les règles de grammaire spécifiques sont les suivantes :

keyframes-rule: '@keyframes' IDENT '{' keyframes-blocks '}';   
 keyframes-blocks: [ keyframe-selectors block ]* ;   
 keyframe-selectors: [ 'from' | 'to' | PERCENTAGE ] [ ',' [ 'from' | 'to' | PERCENTAGE ] ]*

Rassemblez la grammaire ci-dessus

@keyframes IDENT {   
     from {   
       Properties:Properties value;   
     }   
     Percentage {   
       Properties:Properties value;   
     }   
     to {   
       Properties:Properties value;   
     }   
   }  
   或者全部写成百分比的形式：

@keyframes IDENT {   
   0% {   
      Properties:Properties value;   
   }   
   Percentage {   
      Properties:Properties value;   
   }   
   100% {   
      Properties:Properties value;   
   }   
 }

Parmi elles, IDENT est un nom d'animation Vous pouvez le choisir avec désinvolture. Bien sûr, ce sera plus sémantique. D'accord, le pourcentage est une valeur en pourcentage. Nous pouvons ajouter de nombreux pourcentages de ce type. Properties est le nom de la propriété CSS, comme left, background, etc., et value est la valeur de l'attribut correspondant. . Il est à noter que notre from et to correspondent respectivement à 0% et 100%. Nous l’avons déjà mentionné. Jusqu'à présent, seuls les navigateurs dotés du noyau Webkit prennent en charge l'animation, je dois donc ajouter le préfixe -webkit à ce qui précède. On dit que Firefox5 peut prendre en charge la propriété d'animation de CSS3.

Regardons un exemple :

@-webkit-keyframes 'test' {   
     0% {   
        margin-left: 100px;   
        background: green;   
     }   
     40% {   
        margin-left: 150px;   
        background: orange;   
     }   
     60% {   
        margin-left: 75px;   
        background: blue;   
     }   
     100% {   
        margin-left: 100px;   
        background: red;   
     }   
  }

Ici nous définissons une animation appelée "test". Son animation commence à 0% et se termine à 100%, et elle passe également par Il existe deux processus de 40% et 60%. La signification spécifique du code ci-dessus est la suivante: lorsque l'animation de test est à 0%, l'élément est positionné à la position gauche de 100px, la couleur d'arrière-plan est verte, puis à 40% , l'élément passe à la position gauche de 150 px et la couleur d'arrière-plan est verte. À 60 %, l'élément passe à la position où la gauche est 75 px et la couleur d'arrière-plan est bleue. se termine à 100 %, l'élément revient au point de départ où la gauche est de 100 px et la couleur d'arrière-plan devient rouge. Supposons que nous donnons à cette animation seulement 10 secondes de temps d'exécution, alors l'état d'exécution de chaque segment est comme indiqué ci-dessous :

201586182405067.png (499×536)

Une fois les images clés définies, comment devons-nous appeler l'animation "test" que nous venons de définir

L'animation CSS3 est similaire à l'attribut de transition, elles sont toutes arbitraires. la valeur d'attribut de l'élément au fil du temps. La principale différence entre eux est que la transition doit déclencher un événement (événement de survol ou événement de clic, etc.) pour modifier ses propriétés CSS au fil du temps ; l'animation peut également modifier explicitement l'élément CSS au fil du temps sans déclencher d'événement. un effet d'animation. De cette façon, nous pouvons appeler directement l'attribut d'animation d'un élément. Sur cette base, l'animation CSS3 nécessite des valeurs d'attribut d'animation claires. Cela revient à ce que nous avons dit ci-dessus, nous avons besoin d'images clés pour définir les valeurs d'attribut CSS. obtenir l'effet d'éléments changeant à différentes périodes de temps.

Voyons comment appeler l'attribut d'animation pour un élément

.demo1 {   
     width: 50px;   
     height: 50px;   
     margin-left: 100px;   
     background: blue;   
     -webkit-animation-name:'wobble';/*动画属性名，也就是我们前面keyframes定义的动画名*/  
     -webkit-animation-duration: 10s;/*动画持续时间*/  
     -webkit-animation-timing-function: ease-in-out; /*动画频率，和transition-timing-function是一样的*/  
     -webkit-animation-delay: 2s;/*动画延迟时间*/  
     -webkit-animation-iteration-count: 10;/*定义循环资料，infinite为无限次*/  
     -webkit-animation-direction: alternate;/*定义动画方式*/  
  }

CSS Animation动画效果将会影响元素相对应的css值，在整个动画过程中，元素的变化属性值完全是由animation来控制，动画后面的会覆盖前面的属性值。如上面例子：因为我们这个demo只是在不同的时间段改变了demo1的背景色和左边距，其默认值是：margin-left:100px;background: blue；但当我们在执行动画0%时，margin-left:100px,background:green；当执行到40%时，属性变成了：margin-left:150px;background:orange;当执行到60%时margin-left:75px;background:blue;当动画 执行到100%时：margin-left:100px;background: red;此时动画将完成，那么margin-left和background两个属性值将是以100%时的为主,他不会产生叠加效果，只是一次一次覆盖前一次出将的css属性。就如我们平时的css一样，最后出现的权根是最大的。当动画结束后，样式回到默认效果。

 以上就是CSS3中animation属性的使用详解的内容，更多相关内容请关注PHP中文网（www.php.cn）！