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;}}

@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;}
}

{
    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

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!