Tutoriel CSS3-Animation

Peut-être avez-vous vu de nombreuses techniques sur l'animation CSS3, y compris certaines déjà publiées sur le développement front-end, alors jetez maintenant un œil au didacticiel CSS3 - Bases de l'animation.

Animation CSS3 :

Avec CSS3, nous pouvons créer des animations, qui peuvent remplacer les images animées, les animations Flash et JavaScript dans de nombreuses pages Web.

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.

Prise en charge des navigateurs :

Internet Explorer 10, Firefox et Opera prennent en charge les règles et propriétés d'animation @keyframes.

Chrome et Safari nécessitent le préfixe -webkit-.

Remarque : Internet Explorer 9 et versions antérieures ne prennent pas en charge les règles @keyframe ou les propriétés d'animation.

Instance :

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}
@-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
}

Animation CSS3 :

Lorsque vous créez une animation dans @keyframes, veuillez la lier à un sélecteur, sinon elle ne générera pas d'effets d'animation.

En spécifiant au moins les deux propriétés d'animation CSS3 suivantes, vous pouvez lier l'animation au sélecteur :

1 Spécifiez le nom de l'animation

2. la durée de l'animation.

Exemple :

Lier l'animation "myfirst" à un élément div, durée : 5 secondes :

div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s; /* Firefox */
-webkit-animation: myfirst 5s; /* Safari 和 Chrome */
-o-animation: myfirst 5s; /* Opera */
}

Remarque : Vous devez définir le nom et la durée du animation. Si la durée est omise, l'animation ne sera pas autorisée puisque la valeur par défaut est 0.

Qu'est-ce que l'animation en CSS3 ?

L'animation est l'effet de changer progressivement un élément d'un style à un autre.

Vous pouvez changer autant de styles que vous le souhaitez autant de fois que vous le souhaitez.

Veuillez utiliser un pourcentage pour spécifier l'heure à laquelle le changement se produit, ou utilisez les mots-clés "de" et "à", qui sont équivalents à 0 % et 100 %.

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

Pour une meilleure prise en charge du navigateur, vous devez toujours définir des sélecteurs 0 % et 100 %.

Exemple :

Changez la couleur de fond lorsque l'animation est à 25% et 50%, puis changez-la à nouveau lorsque l'animation est terminée à 100% :

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

Exemple :

Modifier la couleur et la position de l'arrière-plan :

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

Propriétés de l'animation CSS3 :

Le tableau suivant répertorie les règles @keyframes et toutes les propriétés de l'animation :

Les deux exemples suivants définissent toutes les propriétés d'animation :

Exemple :

Exécuter une animation nommée myfirst avec toutes les propriétés d'animation définies :

div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Firefox: */
-moz-animation-name: myfirst;
-moz-animation-duration: 5s;
-moz-animation-timing-function: linear;
-moz-animation-delay: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-moz-animation-play-state: running;
/* Safari 和 Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
/* Opera: */
-o-animation-name: myfirst;
-o-animation-duration: 5s;
-o-animation-timing-function: linear;
-o-animation-delay: 2s;
-o-animation-iteration-count: infinite;
-o-animation-direction: alternate;
-o-animation-play-state: running;
}

Exemple :

Identique à l'animation ci-dessus, mais en utilisant l'attribut d'animation abrégé :

div
{
animation: myfirst 5s linear 2s infinite alternate;
/* Firefox: */
-moz-animation: myfirst 5s linear 2s infinite alternate;
/* Safari 和 Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
/* Opera: */
-o-animation: myfirst 5s linear 2s infinite alternate;
}

Ce qui précède est le contenu du tutoriel-animation CSS3, plus connexe Veuillez faire attention à le site Web chinois PHP (www.php.cn) pour le contenu !