CSS3 Animations
animations CSS3 permet l'animation de la plupart des éléments HTML sans utiliser JavaScript ou Flash!
Animation
Browser Support pour Animations
Les chiffres du tableau indiquent la première version du navigateur qui prend en charge entièrement la propriété.
Numbers suivis par -webkit-, -moz- ou -o- précisent la première version qui a travaillé avec un préfixe.
| Propriété | |||||
|---|---|---|---|---|---|
| @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- |
Quels sont CSS3 Animations?
Une animation permet un élément change progressivement d'un style à un autre.
Vous pouvez changer autant de propriétés CSS que vous voulez, autant de fois que vous voulez.
Pour utiliser l'animation CSS3, vous devez d'abord spécifier des images clés pour l'animation.
Keyframes maintenir ce que les styles de l'élément aura à certains moments.
La @keyframes règle
Lorsque vous spécifiez des styles CSS à l' intérieur du @keyframes règle, l'animation va progressivement changer du style actuel au nouveau style à certains moments.
Pour obtenir une animation au travail, vous devez lier l'animation à un élément.
L'exemple suivant lie le "exemple" animation à la <div> élément. La volonté d'animation dure 4 secondes, et il va progressivement changer l'arrière - plan-couleur de la <div> élément du "rouge" à "jaune":
Exemple
/* The animation code */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
Essayez - le vous - même » Remarque: Si l' animation-duration propriété est pas spécifié, l'animation sera sans effet, parce que la valeur par défaut est 0.
Dans l'exemple ci - dessus , nous avons spécifié quand le style va changer en utilisant les mots - clés "from" et "to" (qui représente 0% (début) et 100% (complet)).
Il est également possible d'utiliser pour cent. En utilisant pour cent, vous pouvez ajouter autant de changements de style que vous le souhaitez.
L'exemple suivant va changer l'arrière - plan-couleur de la <div> élément lorsque l'animation est de 25% complet, 50% complet, et à nouveau lorsque l'animation est 100% complet:
Exemple
/* The animation code */
@keyframes example
{
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
} Essayez - le vous - même » L'exemple suivant va changer à la fois la couleur d' arrière plan et la position de la <div> élément lorsque l'animation est de 25% complet, 50% complet, et à nouveau lorsque l'animation est 100% complet:
Exemple
/* The animation code */
@keyframes example
{
0% {background-color: red; left:0px; top:0px;}
25% {background-color: yellow; left:200px; top:0px;}
50% {background-color: blue; left:200px; top:200px;}
75% {background-color: green; left:0px; top:200px;}
100% {background-color: red; left:0px; top:0px;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
} Essayez - le vous - même » Retarder une animation
L' animation-delay propriété spécifie un retard pour le début d'une animation.
L'exemple suivant présente un retard de 2 secondes avant de commencer l'animation:
Exemple
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
} Essayez - le vous - même » Set How Many Times une animation devrait fonctionner
L' animation-iteration-count propriété indique le nombre de fois une animation devrait fonctionner.
L'exemple suivant exécutera l'animation 3 fois avant qu'il arrête:
Exemple
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
} Essayez - le vous - même » L'exemple suivant utilise la valeur " infinite " pour faire l'animation continue à jamais:
Exemple
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count:
infinite;
} Essayez - le vous - même » Exécutez l'animation dans le sens inverse ou des cycles alternés
L' animation-direction propriété est utilisée pour permettre une course d'animation dans le sens inverse ou des cycles alternés.
L'exemple suivant exécutera l'animation dans le sens inverse:
Exemple
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
animation-direction:
reverse;
} Essayez - le vous - même » L'exemple suivant utilise la valeur "alternate" pour faire l'animation première marche avant, puis en arrière, puis vers l' avant:
Exemple
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
animation-direction:
alternate;
} Essayez - le vous - même » Spécifiez la courbe de vitesse de l'animation
L' animation-timing-function propriété indique la courbe de vitesse de l'animation.
La propriété animation-timing-function peut avoir les valeurs suivantes:
-
ease- spécifie une animation avec un démarrage lent, puis rapide, puis se termine lentement (ce qui est par défaut) -
linear- spécifie une animation avec la même vitesse du début à la fin -
ease-in- spécifie une animation avec un démarrage lent -
ease-out- spécifie une animation avec une extrémité lente -
ease-in-out- spécifie une animation avec un démarrage lent et à la fin -
cubic-bezier(n,n,n,n)- vous permet de définir vos propres valeurs dans une fonction cubique-Bézier
L'exemple suivant montre la partie des différentes courbes de vitesse qui peuvent être utilisés:
Exemple
#div1 {animation-timing-function: linear;}
#div2
{animation-timing-function: ease;}
#div3 {animation-timing-function:
ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5
{animation-timing-function: ease-in-out;} Essayez - le vous - même » Animations Shorthand Propriété
L'exemple ci-dessous utilise six des propriétés d'animation:
Exemple
div
{
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
Essayez - le vous - même » Le même effet d'animation comme ci - dessus peut être réalisé en utilisant le raccourci animation bien:
Testez-vous avec des exercices!
Exercice 1 » Exercice 2» Exercice 3 » Exercice 4» Exercice 5 » Exercice 6»
Propriétés CSS3 d'animation
Le tableau suivant dresse la liste des @keyframes règle et toutes les propriétés d'animation:
| Propriété | La description |
|---|---|
| @keyframes | Indique le code d'animation |
| animation | Un raccourci pour définir toutes les propriétés d'animation |
| animation-delay | Indique un retard pour le début d'une animation |
| animation-direction | Indique si une animation devrait jouer dans le sens inverse ou des cycles alternés |
| animation-duration | Indique le nombre de secondes ou en millisecondes une animation nécessaire pour terminer un cycle |
| animation-fill-mode | Spécifie un style pour l'élément lorsque l'animation ne joue pas (quand il est fini, ou quand il a un retard) |
| animation-iteration-count | Indique le nombre de fois qu'une animation devrait être joué |
| animation-name | Indique le nom de l'animation @keyframes |
| animation-play-state | Indique si l'animation est en cours d'exécution ou en pause |
| animation-timing-function | Indique la courbe de vitesse de l'animation |