Tutoriel sur l'utilisation de l'animation CSS

Tout le monde sait que quel que soit le projet, une chose à laquelle il faut prêter attention dès le début est la compatibilité. Aujourd'hui, je vais vous parler de la question de la vérification de la compatibilité.

Nous savons que quel que soit le projet front-end que nous réalisons, une chose à laquelle nous devons prêter attention est la compatibilité, c'est pourquoi nous vous proposerons aujourd'hui un guide détaillé. Voyons quels navigateurs nécessitent une vérification de compatibilité.

Nous savons que diverses animations et effets spéciaux peuvent être créés grâce au puissant CSS3, qui peut remplacer les images, les animations Flash et JavaScript dans de nombreuses pages Web. Aujourd'hui, je vais vous présenter les @keyframes des règles CSS3.

Règles @keyframes CSS3

Pour créer des animations en CSS3, vous devez apprendre les règles @keyframes.

Les règles @keyframes sont utilisées pour créer des animations. En spécifiant un style CSS dans @keyframes, vous pouvez créer un effet d'animation qui passe progressivement du style actuel au nouveau style.

Alors comment utiliser l'animation CSS pour changer l'arrière-plan et la position, le code est le suivant :

@keyframes myfirst
{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
 
@-moz-keyframes myfirst /* Firefox */
{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
 
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
 
@-o-keyframes myfirst /* Opera */
{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

Je crois que vous maîtrisez la méthode après avoir lu ces cas, pour un contenu plus passionnant, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Introduction détaillée de CSS3 à l'attribut translation

Introduction détaillée de CSS3 à l'attribut background-size

Comment utiliser la fonction CSS3 rotate()

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!