Le nouvel attribut d'animation de CSS3« @keyframes » peut être vu à partir de la signification littérale - images clés, qui est cohérente avec la signification dans Flash. Le principe d'utilisation de CSS3 pour créer des effets d'animation est le même que celui de Flash. Nous devons définir les effets d'état au niveau des images clés et utiliser CSS3 pour piloter les effets d'animation.
Syntaxe
@keyframes animationname {keyframes-selector {css-styles;}}
animationname Obligatoire. Définit le nom de l'animation.
sélecteur d'images clés
Obligatoire. Le pourcentage de la durée de l'animation.
Valeurs légales :
0-100 %
de (identique à 0%)
à (identique à 100%)
styles CSS requis. Une ou plusieurs propriétés de style CSS légales.
Définition et utilisation
Avec les règles @keyframes, vous pouvez créer des animations.
Les animations sont créées en changeant progressivement un ensemble de styles CSS en un autre.
Vous pouvez modifier cet ensemble de styles CSS plusieurs fois au cours de l'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, vous devez toujours définir les sélecteurs 0 % et 100 %.
Remarque : veuillez utiliser la propriété animation pour contrôler l'apparence de l'animation et lier l'animation au sélecteur.
Prise en charge des navigateurs
Actuellement, les navigateurs ne prennent pas en charge les règles @keyframes.
Firefox prend en charge les règles alternatives @-moz-keyframes.
Opera prend en charge les règles alternatives @-o-keyframes.
Safari et Chrome prennent en charge les règles alternatives @-webkit-keyframes.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
div {
width: 100px;
height: 100px;
background: #ff72cc;
position: relative;
animation: mymove 5s infinite;
-moz-animation: mymove 5s infinite; /* Firefox */
-webkit-animation: mymove 5s infinite; /* Safari and Chrome */
-o-animation: mymove 5s infinite; /* Opera */
}
@keyframes mymove {
0% {
top: 0px;
}
25% {
top: 200px;
}
75% {
top: 50px
}
100% {
top: 100px;
}
}
@-moz-keyframes mymove /* Firefox */
{
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;
}
}
@-o-keyframes mymove /* Opera */
{
0% {
top: 0px;
}
25% {
top: 200px;
}
75% {
top: 50px
}
100% {
top: 100px;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>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">
<title>php中文网(php.cn)</title>
<style type="text/css">
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: mymove 5s infinite;
-moz-animation: mymove 5s infinite; /* Firefox */
-webkit-animation: mymove 5s infinite; /* Safari and Chrome */
-o-animation: mymove 5s infinite; /* Opera */
}
@keyframes mymove {
0% {
top: 0px;
background: red;
width: 100px;
}
100% {
top: 200px;
background: yellow;
width: 300px;
}
}
@-moz-keyframes mymove /* Firefox */
{
0% {
top: 0px;
background: red;
width: 100px;
}
100% {
top: 200px;
background: yellow;
width: 300px;
}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {
top: 0px;
background: red;
width: 100px;
}
100% {
top: 200px;
background: yellow;
width: 300px;
}
}
@-o-keyframes mymove /* Opera */
{
0% {
top: 0px;
background: red;
width: 100px;
}
100% {
top: 200px;
background: yellow;
width: 300px;
}
}
</style>
</head>
<body>
<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
<div></div>
</body>
</html>Propriétés d'animation CSS3 de
Le tableau suivant répertorie les règles @keyframes et toutes les propriétés d'animation :
Propriétés @keyframes spécifie l'animation. 3
animation-name Spécifie le nom de l'animation @keyframes. 3
animation-duration Spécifie les secondes ou millisecondes nécessaires à l'animation pour terminer un cycle. La valeur par défaut est 0. 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. 3
animation-iteration-count Spécifie le nombre de fois que l'animation est jouée. La valeur par défaut est 1. 3
animation-direction Spécifie si l'animation est jouée en sens inverse lors du cycle suivant. La valeur par défaut est "normale". 3
animation-play-state Spécifie 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">
<title>php中文网(php.cn)</title>
<style type="text/css">
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: mymove 5s infinite;
-moz-animation: mymove 5s infinite; /* Firefox */
-webkit-animation: mymove 5s infinite; /* Safari and Chrome */
-o-animation: mymove 5s infinite; /* Opera */
}
@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;
}
}
@-moz-keyframes mymove /* Firefox */
{
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;
}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
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;
}
}
@-o-keyframes mymove /* Opera */
{
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;
}
}
</style>
</head>
<body>
<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
<div></div>
</body>
</html>