Implémentation de l'animation @keyframes en CSS3

Cet article présente principalement les informations pertinentes sur l'implémentation d'animation simple de CSS3 @keyframes. Le contenu est assez bon, je vais le partager avec vous maintenant et le donner comme référence.

Implémentation d'animation simple CSS3 @keyframes

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 voulez la maîtriser à fond, vous devez apprendre à utiliser l'animation ensemble.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois ! Recommandations associées :

Analyse des requêtes multimédias de CSS3

Utilisation de CSS3 pour implémenter huit groupes de souris super cool Slide sur l'animation d'images

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!