CSS3 Comment créer des animations ?

Vous avez probablement entendu au moins quelque chose sur l'animation en utilisant la syntaxe CSS3 basée sur keyframes.
  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.

Somaire

La règle @keyframes CSS3

CSS3 cours tutorial

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

Sélectionner 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

Sélectionner 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 chrome
-webkit-
fire-fox IE opera safari
-webkit-
Animation chrome
-webkit-
fire-fox ie opera safari
-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 :

Sélectionner 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 % :

Sélectionner 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:

Sélectionner 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 :

Sélectionner 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 :

Sélectionner 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

Sélectionner 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 sommaire chapitre suivant