OUJOOD.COM
La règle @keyframes CSS3
Le module d'animations CSS3 a le potentiel pour devenir une grande partie de la conception Web. Avec CSS3, nous pouvons créer des animations, qui peuvent remplacer des images animées, animations Flash et JavaScripts dans de nombreuses pages web.
Dans cet article, nous allons couvrir toutes les parties importantes de la syntaxe, et nous allons vous donner des détails sur le soutien du navigateur de sorte que vous saurez comment l'utiliser.
La première chose inhabituelle que vous remarquerez sur n'importe quel code d'animation CSS3 est la règle @keyframes.
En effet pour créer des animations en CSS3, vous aurez besoin d'apprendre la règle @keyframes.
La règle @keyframes indique où l'animation est créée. Vous spécifiez un style CSS à l'intérieur de la règle @keyframes et l'animation va progressivement changer le style actuel au nouveau style.
Voila comment sera une animation
Exemple : 📋 Copier le code
@keyframes Nom-ANIMATION {
régle1 { code css }
régle2 { code css }
}
On peut mettre autant de règles que l’on veut à l’intérieur de la règle @keyframes
Exemlpe
Exemple : 📋 Copier le code
@keyframes Nom-ANIMATION {
0% { opacity: 0; }
100% { opacity: 1; }
}
Il faudra évidemment ajouter les préfixes navigateurs ( Webkit -webkit-, Gecko -moz- , Opera -o- et IE10 -ms-) por les navigateurs ne supportant pas l’animaation.
A noter que les valeurs en pourcentage représentent un moment précis au cours de la durée de l’animation.
Ainsi, 10% représentera la 6ème seconde d'une animation durant une minute , 0% représente le début et 100% la fin de l’animation.
Appui de navigateur
|
Propriété |
Appui de navigateur |
||||
|---|---|---|---|---|---|
| @keyframes |
-webkit- |
|
|
|
-webkit- |
| Animation |
-webkit- |
|
|
|
-webkit- |
Opera, Firefox et Internet Explorer 10 prennent en charge la propriété d'animation et la règle @keyframes.
Chrome et Safari nécessite le préfixe - webkit-.
Remarque : Internet Explorer 9 et versions antérieures, ne supportent pas la propriété animation ou la règle @keyframe.
CSS3 animation
Lorsque l'animation est créée dans @keyframe, elle doit être liée à un sélecteur, sinon l'animation n'a aucun effet.
Pour lier l'animation à un sélecteur en doit spécifier au moins deux propriétés de CSS3 animation :
1- le nom de l'animation
2- la durée de l'animation
Exemple Liant l'animation «Mon-ANIMATION » à un élément div, durée: 10 secondes :
Exemple : 📋 Copier le code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>CSS3 animation</title>
<style>
@keyframes Mon-ANIMATION {
from { opacity: 0; }
to { opacity: 1; }
}
@-webkit-keyframes Mon-ANIMATION {/* Safari et Chrome */
from { opacity: 0; }
to { opacity: 1; }
}
div
{
width:100px;
height:100px;
background:#ff00ff;
animation:Mon-ANIMATION 10s;
-webkit-animation:Mon-ANIMATION 10s; /* Safari et Chrome */
}
</style>
</head>
<body>
<div>Ceci est un div animé avec CSS3 animation</div>
</body>
</html>
Remarque :Vous devez définir le nom et la durée de l'animation. Si durée est omise, la volonté de l'animation s'exécute ne pas, car la valeur par défaut est 0.
Qu’est ce que les Animations en CSS3 ?
Une animation est un effet qui permet à un élément de changer d'un style à l'autre d’une manière progressive.
Vous pouvez modifier autant de styles souhaités, et autant de fois que vous voulez il n’y a pas de limites.
Indiquez quand le changement se produira en pourcentage, ou avec les mots clés «from » et « to », qui sont les mêmes que 0 % et 100 %.
0 % est le début de l'animation, 100 % est une fois l'animation terminée.
Il faut toujours définir ces deux valeurs 0 % et 100 %.
Remarque : Il est à noter que les keyframes 0% et 100% sont obligatoires et que leur omission empêchera le fonctionnement de votre animation sur certains navigateurs.
Exemple Changer la couleur d'arrière-plan lorsque l'animation est de 25 %, 50 %, et à nouveau lorsque l'animation est 100 % :
Exemple : 📋 Copier le code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>CSS3 animation</title>
<style>
@keyframes myfirstAnimation
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
@-webkit-keyframes myfirstAnimation /* Safari et Chrome */
{
0% {background:#df77aa;}
25% {background:#dfdfaa;}
50% {background:aa77df;}
100% {background:#0b7709;}
}
div
{
width:150px;
height:150px;
background:red;
animation:myfirstAnimation 12s;
-webkit-animation:myfirstAnimation 20s; /* Safari et Chrome */
}
</style>
</head>
<body>
<p><b>Note:</b>Lorsqu'une animation se termine, elle revient à son style d'origine.</p>
<div></div>
</body>
</html>
Exemple Changer la couleur d'arrière-plan et la position d’un élément:
Exemple : 📋 Copier le code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>CSS3 animation</title>
<style>
@keyframes myfirstAnimation
{
0% {background:#df77aa; left:0px; top:0px;}
25% {background:#dfdfaa; left:200px; top:0px;}
50% {background:aa77df;left:200px; top:200px;}
75% {background: #0b7709; left:0px; top:200px;}
100% {background:#0b6609; left:0px; top:0px;}
}
@-webkit-keyframes myfirstAnimation /* Safari et Chrome */
{
0% {background:#df77aa; left:0px; top:0px;}
25% {background:#dfdfaa; left:200px; top:0px;}
50% {background:aa77df;left:200px; top:200px;}
75% {background: #0b7709; left:0px; top:200px;}
100% {background:#0b6609; left:0px; top:0px;}
}
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirstAnimation 12s;
-webkit-animation:myfirstAnimation 20s; /* Safari et Chrome */
}
</style>
</head>
<body>
<p><b>Note:</b>Lorsqu'une animation se termine, elle revient à son style d'origine.</p>
<div></div>
</body>
</html>
CSS3 Propriétés Animation
Le tableau suivant répertorie toutes les propriétés de l'animation et de la règle @keyframes :
|
Propriété |
Description |
|---|---|
| @keyframes | Spécifie une animation. Syntaxe : animation: name duration timing-function delay iteration-count direction; |
| animation | Propriété racourci des animation |
| animation-name | Spécifies le nom de l’animation @keyframes |
| animation-duration | Spécifies la duré de l’animation par défaut 0 |
| animation-timing-function | Décrit comment l’animation doit se dérouler par défaut "ease" |
| animation-delay | Spécifies le délais avant le démarrage de l’animation. Défaut 0 |
| animation-iteration-count | Spécifies le nombre de fois que l”animation doit se répéter. Défaut 1 |
| animation-direction | Défini le sens dans lequel l'animation est jouée : normal : l'animation va de l'étape 1 à n. reverse : l'animation va de l'étape n à 1. Défaut "normal" |
| animation-play-state | détermine si l'animation est en cours de lecture ou en pause. Défaut "running" |
Les deux exemples qui viennent ci-dessous montrent comment définir toutes les propriétés de l'animation :
Exemple Exécuter une animation appelée monAnimation, avec l'ensemble de toutes les propriétés d'animation :
Exemple : 📋 Copier le code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>CSS3 animation</title>
<style>
@keyframes monAnimation
{
0% {background:#df77aa; left:0px; top:0px;}
25% {background:#dfdfaa; left:200px; top:0px;}
50% {background:aa77df;left:200px; top:200px;}
75% {background: #0b7709; left:0px; top:200px;}
100% {background:#0b6609; left:0px; top:0px;}
}
@-webkit-keyframes monAnimation /* Safari et Chrome */
{
0% {background:#df77aa; left:0px; top:0px;}
25% {background:#dfdfaa; left:200px; top:0px;}
50% {background:aa77df;left:200px; top:200px;}
75% {background: #0b7709; left:0px; top:200px;}
100% {background:#0b6609; left:0px; top:0px;}
}
div
{
width:5em;
height:5em;
border-radius:2.5em;
background:red;
position:relative;
animation-name:monAnimation;
animation-duration:5s;
animation-timing-function:linear;
animation-delay:2s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
/* Safari et Chrome: */
-webkit-animation-name:monAnimation;
-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;
}
</style>
</head>
<body>
<p><b>Note:</b>Lorsqu'une animation se termine, elle revient à son style d'origine.</p>
<div></div>
</body>
</html>
Raccourcie d'animation
Syntaxe : animation: name duration timing-function delay iteration-count direction;
Comme le montre la syntaxe il suffit juste mettre toutes les valeurs individuelles séparé par des espaces. L'ordre n'a pas d'importance sauf si vous utilisez à la fois la durée et les délais, ils doivent être dans cet ordre indiqué parla syntaxe ci-dessus et l’exemple ci-dessous.
Exemple La même animation que ci-dessus, à l'aide de la propriété raccourcie d'animation :
Exemple : 📋 Copier le code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>CSS3 animation</title>
<style>
@keyframes monAnimation
{
0% {background:#df77aa; left:0px; top:0px;}
25% {background:#dfdfaa; left:200px; top:0px;}
50% {background:aa77df;left:200px; top:200px;}
75% {background: #0b7709; left:0px; top:200px;}
100% {background:#0b6609; left:0px; top:0px;}
}
@-webkit-keyframes monAnimation /* Safari et Chrome */
{
0% {background:#df77aa; left:0px; top:0px;}
25% {background:#dfdfaa; left:200px; top:0px;}
50% {background:aa77df;left:200px; top:200px;}
75% {background: #0b7709; left:0px; top:200px;}
100% {background:#0b6609; left:0px; top:0px;}
}
div
{
width:5em;
height:5em;
border-radius:2.5em;
background:red;
position:relative;
animation:monAnimation 5s linear 2s infinite alternate;
/* Safari et Chrome: */
-webkit-animation:monAnimation 5s linear 2s infinite alternate;
}
</style>
</head>
<body>
<p><b>Note:</b>Lorsqu'une animation se termine, elle revient à son style d'origine.</p>
<div></div>
</body>
</html>
Comment combiner plusieurs animations
Vous pouvez combiner plusieurs animations dans un sélecteur en les séparant par des virgules.
Exemple
Exemple : 📋 Copier le code
Selecteur{
animation: nom-animation duration1 timing-function1 delay1 iteration –count1 direction1,
nom-animation duration2 timing-function2 delay2 iteration –count2 direction2,
nom-animation duration3 timing-function3 delay3 iteration–count3 direction3;
}
Par carabde 10 mars 2014 chapitre précédent chapitre suivant