animations CSS3
animations CSS3
CSS3, nous pouvons créer des animations qui peuvent remplacer de nombreuses pages d'images animées, des animations Flash et Javascripts.
animation
CSS3 @keyframes règles
Pour créer des animations CSS3, vous aurez à apprendre les règles de @keyframes.
@keyframes règle est de créer une animation. Spécifiez un style CSS et de l'animation va progressivement changer pour le nouveau style du style actuel dans les règles de @keyframes.
support du navigateur
Les chiffres du tableau représentent le premier navigateur pour soutenir le numéro de version de la propriété.
Immédiatement après la -webkit- numérique, -ms- ou -moz- il y a à l'appui du préfixe d'attribut premier numéro de version du navigateur.
属性 | |||||
---|---|---|---|---|---|
@keyframes | 43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
animation | 43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
Exemples
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background: red;}
to {background: yellow;}
}
animations CSS3
Lors de la création @keyframes d'animation, le lier à un sélecteur, sinon l'animation n'a pas d' effet.
Indiquez au moins deux propriétés d'animation CSS3 est lié à un sélecteur:
- Il spécifie le nom de l'animation
- Quand une animation de longueur prédéterminée
Exemples
L'animation "MyFirst" lié à div élément Durée: 5 secondes:
{
animation: myfirst 5s;
-webkit-animation: myfirst 5s; /* Safari and Chrome */
}
Essayez »
Remarque: Vous devez définir la durée de l'animation et de l' animation nom.Si vous omettez la durée de l'animation ne fonctionnera pas parce que la valeur par défaut est 0.
Quelles animations CSS3 sont?
élément d'animation est de faire un changement progressif d'un style à un autre effet de style.
Vous pouvez changer autant de styles que de nombreuses fois.
S'il vous plaît utiliser le pourcentage de variation dans le temps imparti, ou mot-clé "de" et "à", équivalent à 0% et 100%.
0% correspond au début de l'animation, l'animation est complète à 100%.
Pour un meilleur support du navigateur, vous devez toujours définir le 0% et 100% du sélecteur.
Exemples
Changez la couleur d'arrière-plan lorsque l'animation est de 25% et 50%, et 100% terminée lorsque l'animation a changé à nouveau:
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
Essayez »
Exemples
Changez la couleur et l'emplacement de fond:
{
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;}
}
Essayez »
propriétés d'animation CSS3
Le tableau suivant répertorie les règles de @keyframes et toutes les propriétés d'animation:
propriété | description | CSS |
---|---|---|
@keyframes | Provisions animation. | 3 |
animation | propriété Raccourci pour toutes les propriétés de l'animation, en plus de la propriété jeu état d'animation. | 3 |
animation-name | Indique l'animation nom @keyframes. | 3 |
animation durée | Dispositions animation faut pour terminer un cycle de secondes ou en millisecondes. La valeur par défaut est 0. | 3 |
animation-timing-function | Une vitesse prédéterminée de la courbe d'animation. La valeur par défaut est "facilité". | 3 |
animation-delay | Quand une animation prédéterminée démarre. La valeur par défaut est 0. | 3 |
animation-iteration-count | nombre de fois prédéterminé, l'animation est jouée. La valeur par défaut est 1. | 3 |
animation-direction | Si les dispositions de l'animation à jouer en sens inverse pour le prochain cycle. La valeur par défaut est "normal". | 3 |
état-animation-play | Si les dispositions de l'animation est en cours d'exécution ou en pause. La valeur par défaut est "en cours d'exécution". | 3 |
Les deux exemples qui suivent présentent toutes les propriétés d'animation:
Exemples
Exécutez l'animation MyFirst, définir tous les attributs:
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Safari and 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;
}
Essayez »
Exemples
L'animation ci-dessus le même, mais avec une courte propriétés d'animation d'animation:
{
animation: myfirst 5s linear 2s infinite alternate;
/* Safari and Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
}
Essayez »