Animations CSS3
Animation CSS3
Animation CSS3
CSS3, nous pouvons créer des animations, qui peuvent remplacer de nombreuses images animées de pages Web, animations Flash et JAVAScripts.
Règles CSS3 @keyframes
Pour créer des animations CSS3, vous devrez comprendre les règles @keyframes.
La règle @keyframes sert à créer des animations. Spécifiez un style CSS et une animation dans la règle @keyframes qui passeront progressivement du style actuel au nouveau style.
Animations CSS3
Lors de la création d'animations dans @keyframes, liez-le à un sélecteur, sinon l'animation n'aura aucun effet.
Spécifiez qu'au moins deux propriétés d'animation CSS3 sont liées à un sélecteur :
Spécifiez le nom de l'animation
Spécifiez la durée de l'animation
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}Propriétés d'animation CSS3
Le tableau suivant répertorie les règles @keyframes et toutes les propriétés d'animation : Animation CSS. 3
animation-timing-function spécifie la courbe de vitesse de l'animation. La valeur par défaut est « facilité ». 3
animation-delay spécifie quand l'animation démarre. La valeur par défaut est 0. . La valeur par défaut est 1. 3
animation-direction spécifie si l'animation est jouée à l'envers lors du cycle suivant. La valeur par défaut est "normale". 3
animation-play-state précise si l'animation est en cours d'exécution ou en pause. La valeur par défaut est "en cours d'exécution". 3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s linear 2s infinite alternate;
/* Firefox: */
-moz-animation:myfirst 5s linear 2s infinite alternate;
/* Safari and Chrome: */
-webkit-animation:myfirst 5s linear 2s infinite alternate;
/* Opera: */
-o-animation:myfirst 5s linear 2s infinite alternate;
}
@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 and 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;}
}
</style>
</head>
<body>
<p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>
<div></div>
</body>
</html>rrreeQu'est-ce que l'animation 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 préciser l'heure à laquelle le changement se produit en pourcentage, ou utiliser 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 %.
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:red;}
to {background:yellow;}
}
</style>
</head>
<body>
<p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>
<div></div>
</body>
</html>
- Recommandations de cours
- Téléchargement du didacticiel
Le didacticiel n'est pas disponible au téléchargement pour le moment. Le staff est actuellement en train de l'organiser. Veuillez prêter plus d'attention à ce cours à l'avenir ~ 