Maison > Article > interface Web > 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 !