Animations simples en CSS3

Bien le bonjour, cher curieux ! Je poste mon premier tutoriel de codage pour... parler d'animations. Et attention, j'ai dit "animations", pas "transition" ou "transformations". D'ailleurs, vous n'aurez pas besoin de ces derniers pour comprendre ce tutoriel, je ne vais parler que des animations.

 

En effet, ça serait plus pratique. Voici donc un petit exemple d'animation : clique ! N'est-ce pas magnifique ? En général, les animations se font avec des langages comme le JavaScript, mais ici nous allons en réaliser des simples rien qu'avec le CSS3 ! Tu veux faire la même chose ? Dans ce cas, il te suffit de suivre ce tutoriel !

 

 

Comment ça marche ?

Reprenons notre petite animation de plus haut, à savoir celle-ci. Mais que se cache donc derrière ce carré qui change de couleur ? Regardons de plus près le CSS, ainsi que le HTML (il faut bien intégrer votre code quelque part, tout de même) :

Code:

/***CSS***/
/*Firefox 5.0*/
-moz-@keyframes nuxemple {
  0% {background: blue;}
  25% {background: red;}
  75% {background: yellow;}
  100% {background: green;}
}
/*Safari 4.0, Opera 15.0, Chrome 4.0*/
-webkit-@keyframes nuxemple {
  0% {background: blue;}
  25% {background: red;}
  75% {background: yellow;}
  100% {background: green;}
}
/*Opera 12.0*/
-o-@keyframes nuxemple {
  0% {background: blue;}
  25% {background: red;}
  75% {background: yellow;}
  100% {background: green;}
}
/*Standard*/
@keyframes nuxemple {
  0% {background: blue;}
  25% {background: red;}
  75% {background: yellow;}
  100% {background: green;}
}
div {
   width: 300px;
   height: 300px;
  /*Syntaxe avec super-propriété "animation"*/
  -moz-animation: nuxemple 3s linear 0s infinite alternate;
  -webkit-animation: nuxemple 3s linear 0s infinite alternate;
  -o-animation: nuxemple 3s linear 0s infinite alternate;
  animation: nuxemple 3s linear 0s infinite alternate;
}


<!-- HTML -->
<div></div>

Pourquoi je n'ai aucune class (ou id) dans mon HTML ? Tout simplement parce que j'ai sélectionné toutes les divs de mon code, donc ici la seule div que j'ai. Mais passons au CSS. Vous remarquerez qu'un drôle d'élément a fait son apparition et que la fin du CSS est incompréhensible. Mais pas de panique, je la décortique pour vous !

Partie avec le @keyframes

Je vais m'attarder ici uniquement sur la syntaxe "standard", tout simplement parce que c'est exactement la même chose pour les syntaxes préfixées (avec le préfixe en plus). Observons donc ceci :

Code:

@keyframes nuxemple {
  0% {background: blue;}
  25% {background: red;}
  75% {background: yellow;}
  100% {background: green;}
}

Ma propriété ici est @keyframes, suivit du nom de l'animation (ici, nuxemple, mais vous pouvez lui donner n'importe quel nom, du moment que vous mettez exactement le même -à la lettre près- partout). Jusque-là, pas vraiment de problèmes. C'est la suite qui se complique. Ici, notre bloc changera quatre fois de couleur. C'est vrai, c'est évident, mais je suis sûr que les deux messieurs au fond sont en train de se demander comment ça se passe.
Imaginons, la durée de mon animation est de 100%. A 0%, donc au début, mon carré est bleu. A 25% de l'animation, il devient rouge. Puis à 25%, sa couleur vire au jaune et à 100% (à la fin donc), je me retrouve avec un carré vert. Simple, non ? Sachez tout de même que si vous ne spécifiez pas le nombre de fois où l'animation se répète, vous vous retrouverez avec un carré vert à la fin, puis de nouveau bleu et... et c'est tout. Par chance, il existe quelques astuces pour contrer cela, mais nous verrons ceci plus tard.

Vous organisez comme vous le sentez vos nombre de changement de couleur et pourcentages, en sachant que lorsque vous ne voulez que deux couleurs, il faut coder ceci :

Code:

@keyframes nuxemple {
from { background: red; }
to { background: yellow; }
}

Ici, mon élément passera de rouge à jaune, ce qui vous donne quelque chose de ce genre. Bien sûr, ici j'ai usé de ma petite tactique de triche pour ne pas que ça s'arrête brusquement.

 
Justement, j'allai en venir à ce point-ci : on peut aussi faire bouger notre carré, comme ceci ! J'avoue avoir utilisé ma petite technique pour ne pas avoir un arrêt brutal. Et voici le petit code pour arriver à ce petit miracle :

Code:

/*Standard*/
@keyframes nuxemple {
  0% {background: blue; left: 0px; top: 0px;}
  25% {background: red; left: 100px; top: 0px;}
  75% {background: yellow; left: 100px; top: 100px;}
  100% {background: green; left: 0px; top: 0px;}
}

div {
   width: 300px;
   height: 300px;
      position: relative; /*PENSEZ A METTRE VOTRE ELEMENT EN POSITION RELATIVE, FIXE OU ABSOLUE SI VOUS VOULEZ QUELQUE CHOSE QUI BOUGE*/
  /*Syntaxe avec super-propriété "animation"*/
  animation: nuxemple 3s linear 0s infinite;
}

En plus de la propriété background, j'ai ajouté une des propriété pour déterminer une position (top, left, right, bottom). Puis j'ai mis mon petit carré en position relative (très important si vous souhaitez que votre bloc bouge, mais ça marche aussi en fixe et en absolue), et j'ai laissé la magie opérer !

 
Justement, je vais l'expliquer de ce pas ~

Partie avec la (super)propriété animation

 

Voici donc la seconde partie de notre CSS

Code:

animation: nuxemple 3s linear 0s infinite alternate;

Vu comme ça, c'est vraiment du charabia, n'est-ce pas ? Mais chaque valeur correspond à une propriété. Je vais donc remplacer toutes ces valeurs par leurs propriétés correspondantes :

Code:

animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction

Ça fait beaucoup à retenir, surtout que certaines on un nom assez obscure... Mais pas de panique, je vais vous expliquer à quoi correspond chaque propriété !

1. animation-name :Ici, pas très compliqué à comprendre : le nom de l'animation (ici nuxemple)


2. animation-duration : Là non plus, pas trop de difficultés : la durée de l'animation (5s, 700ms... valeur par défaut: 0). A DÉFINIR ABSOLUMENT. (ici 3s, soit 3 secondes)


3. animation-timing-function : Là, c'est un peu plus obscure : il s'agit de la "vitesse" de l'animation (linear, ease... par défaut : ease. Plus de détails plus bas.) (ici linear)


4. animation-delay : Là, pas vraiment difficile à comprendre non plus, c'est le délai de l'animation ; si elle commence au bout de 5s, 400ms... Valeur par défaut : 0s. (ici 0s, donc la valeur par défaut)


5. animation-iteration-count : Un nom compliqué pour définir une chose simple : ceci définit le nombre de fois où l'animation va se "répéter" ; une fois ce nombre écoulé, l'animation s'arrête (si vous mettez "3", l'animation va se répéter 3 fois avant de s'arrêter). Par défaut, c'est une fois. Possibilité de mettre infinite en valeur pour qu'elle se déroule indéfiniment. (ici infinite)


6. animation-direction : Un nom un peu flou ; cette propriété a deux valeurs : reverse et alternate. reverse va "inverser" l'animation (par exemple, mon bloc doit d'abord être bleu, puis rouge puis vert ; là il va d'abord être vert, puis rouge et enfin bleu) et alternate va "alterner" l'animation, grosso-modo la faire dans l'ordre défini (par exemple rouge, vert, bleu) puis inverser (bleu, vert, rouge si je reprends mon exemple) et ce, durant tout le temps de l'animation. Attention, si tu as, par exemple, définit que l'animation se déroulera trois fois, la première fois sera "normale", la seconde "alternée" et la dernière normale. (ici alternate)

Voici donc notre fameux code avec toutes ces propriétés :

Code:

div {
/*...*/
animation-name: nuxemple;
animation-duration: 3s;
animation-timing-function: linear;
animation-delay: 0s; /*Je pouvais carrément enlever cette partie, car la valeur par défaut est 0*/
animation-iteration-count: infinite;
animation-direction: alternate
}

La super-propriété raccourci bien le code, n'est-ce pas ? Néanmoins, sachez que ce code plutôt long a le même effet que la super-propriété.

   

Après la théorie, la pratique !

Après une séance de décorticage, nous passons maintenant à... bah, la pratique. Mais soyez sans crainte, je vais vous aider pas à pas ~

Ce que nous allons donc faire, c'est un rond normalement violet qui va devenir rouge, rose jaune et orange. Et parce que j'aime bien compliquer les choses, notre rond va bouger. Dit comme ça, ça à l'air simple, mais attendez voir...



Pour commencer, ouvrez votre feuille de style CSS ou de tout autre endroit où vous pourrez mettre le CSS. Une fois fait, nous allons ouvrir notre... aller, on a vu ça plus haut... ah, la dame du deuxième rang... Oui ! Exactement ! Nous allons donc introduire notre CSS par notre fameux @keyframes ! Mais pas que. Il vous faut aussi quelque chose d'important... Mais si, vous savez quoi. C'est pas suffisant le @keyframes, il faut... nommer l'animation ! Vous l'appelez comme vous le souhaitez, moi je vais l'appeler... nu-exo. On ne me juge pas, s'il vous plaît. Donc, notre CSS ressemble à ceci.

Code:

@keyframes nu-exo {

}

Je laisse un espace exprès pour pouvoir mettre la suite du code. Une fois ceci fait, il nous faut mettre des propriétés à l'intérieur. Rappelez-vous, nous (enfin, je) voulons un rond violet qui devient successivement rouge, rose, jaune et orange. Nous allons donc utiliser... les pourcentages vus au début.

Code:

@keyframes nu-exo {
0% {background: #A93A8C;}
32% {background: #E80101;}
64% {background: #F476A9;}
76% {background: yellow;}
100% {background: #F6620C;}
}

Comme vous pouvez le voir, j'ai mit un peu ce que je voulais dans les pourcentages, mais sachez que vous devez obligatoirement avoir 0% au départ et 100% à la fin. Si vous préférez avoir 3 couleurs, 6 couleurs ou même une dizaine, adaptez les pourcentages en fonction de ce que vous souhaitez. Rappelez-vous que pour deux couleurs, le code est le suivant :

Code:

@keyframes nu-exo {
from {propriété: valeur;}
to {propriété: valeur;}
}

Pas de problème ! Si vous souhaitez avoir d'autres couleurs, vous avez deux choix : soit utiliser les noms de couleurs anglais (red, yellow, green, blue...) ou, beaucoup moins limité, les couleurs hexadécimales. Comme il est impossible de savoir à vu de nez ce que fera #56AEBC par exemple, vous pouvez aller sur ce site et choisir vos couleur en toute tranquillité ~ Vous pourrez également constater que les couleurs que j'ai prise pour cet exemple sont effectivement du violet, du rouge, du rose et du orange, et que la couleur que j'ai "composé" totalement au hasard (à savoir #56AEBC) correspond à du bleu.
Mais revenons. Dans la fameuse seconde partie du code, nous allons donner une class à notre rond (pour moi, ça sera "rond". Effectivement, je ne vais pas chercher très loin xD) et nous allons lui mettre des propriétés :

Code:

.rond {
width: 150px;
height: 150px;
border-radius: 150px; /*arrondi les bords et forme ici un rond*/
background: #A93A8C; /*important si vous ne voulez pas vous retrouver avec un rond invisible à la fin de l'animation*/
animation-name: nu-exo;
animation-duration: 3s; /*vous pouvez mettre plus longtemps. Sachez qu'il est important de définir une durée !*/

Il ne reste plus qu'à intégrer tout ça dans le HTML...

Code:

<div class="rond"></div>
<!-- Si ça vous chante, vous pouvez écrire un mot d'amour dans votre cercle ~ -->

Pour le moment, nous avons ceci. Vous pouvez constater que, effectivement, l'animation s'arrête au bout d'un moment.  Niveau code, nous avons cela :

Code:

/*CSS*/
@keyframes nu-exo {
0% {background: #A93A8C;}
32% {background: #E80101;}
64% {background: #F476A9;}
76% {background: yellow;}
100% {background: #F6620C;}
}

.rond {
width: 150px;
height: 150px;
border-radius: 150px;
background: #A93A8C;
animation-name: nu-exo;
animation-duration: 3s;

<!-- HTML -->
<div class="rond"></div>

... Dites, on n'aurait pas oublié quelque chose, par hasard ? ... Mais oui, notre rond doit bouger ! Pour cela, il nous suffit de mettre notre élément en position relative (ou absolute ou fixe) si vous voulez que ça bouge ~  Ensuite, nous retournons dans notre CSS et nous allons donner du mouvement au bloc. Pour cela, rien de plus simple, il suffit d'utiliser les propriétés top, bottom, left ou right suivi d'une valeur en pixels. Un peu comme ici :

Code:

@keyframes nu-exo {
0% {background: #A93A8C; top: 0px; left: 0px;}
32% {background: #E80101; top: 0px; left: 200px;}
64% {background: #F476A9; top: 200px; left: 200px;}
76% {background: yellow; top: 200px; left: 0px;}      
100% {background: #F6620C; top: 0px; left: 0px;}
}

.rond {
      position: relative;
   width: 150px;
   height: 150px;
      border-radius: 150px;
      background: #A93A8C;
  animation-name: nu-exo;
  animation-duration: 3s;
}

Et nous avons ceci ! Pas mal, non ? ... Comment ça, il y a un détail qui gêne ? L'arrêt brutal ? Nous allons donc masquer cela en utilisant certaines propriétés précédemment vues ! Pour plus de clarté, je vais utiliser la super-propriété puis montrer ce que ça donne avec les propriétés séparées. Nous avons donc une première astuce qui s'ouvre à nous : utiliser infinite. Ce qui nous donnerait :

Code:

animation: nu-exo 3s ease-in-out 0s infinite;
/*OU*/
animation-name: nu-exo;
animation-duration: 3s;
animation-timing-duration: ease-in-out;
animation-delay: 0s;
animation-iteration-count: infinite;

Ce qui donne ça. Si ça ne vous va toujours pas, vous pouvez toujours taper ceci :

Code:

animation: nu-exo 3s ease-in-out 0s infinite alternate;
/*OU*/
animation-name: nu-exo;
animation-duration: 3s;
animation-timing-duration: ease-in-out;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: alternate;

Et pourquoi à un endroit ça va plus vite qu'un autre ? Je vais expliquer ça en donnant un exemple tout bête. Imaginez que votre animation soit un facteur qui doit livrer ses courriers/colis/lettres dans un temps limite, ici 1 minute, soit 100%. Il commence donc à 0%, soit au début, et dépose son premier colis à 32% du temps. Bon, il a le temps, ça va. Le second paquet, il a pris plus de temps et du coup, il le livre quand il est à 64% du temps. Du coup, il va accélérer et à 76% du temps, il a livré le troisième colis. Lui restant plus de temps que prévu, notre facteur va livrer son quatrième et dernier colis pile à la fin du temps limite ; il a donc rempli sa mission de tout livrer en une minute. L'animation, c'est pareil. L'élément a un certains temps que vous définissez pour compléter l'animation en entier. Et suivant les pourcentages que vous lui attribuez, elle va aller plus ou moins vite par endroit.

Et voilà, notre animation est finie ! Rien ne vous empêche cependant de rajouter quelques petites touches personnelles. Personnellement, en rajoutant tous les préfixes et tout le tralala, j'ai obtenu ceci :

Code:

/*CSS*/
/*Firefox 5.0*/
-moz-@keyframes nu-exo {
0% {background: #A93A8C; top: 0px; left: 0px;}
32% {background: #E80101; top: 0px; left: 200px;}
64% {background: #F476A9; top: 200px; left: 200px;}
76% {background: yellow; top: 200px; left: 0px;}      
100% {background: #F6620C; top: 0px; left: 0px;}
}
      
/*Safari 4.0, Opera 15.0, Chrome 4.0*/
-webkit-@keyframes nu-exo {
0% {background: #A93A8C; top: 0px; left: 0px;}
32% {background: #E80101; top: 0px; left: 200px;}
64% {background: #F476A9; top: 200px; left: 200px;}
76% {background: yellow; top: 200px; left: 0px;}      
100% {background: #F6620C; top: 0px; left: 0px;}
}
      
/*Opera 12.0*/
-o-@keyframes nu-exo {
0% {background: #A93A8C; top: 0px; left: 0px;}
32% {background: #E80101; top: 0px; left: 200px;}
64% {background: #F476A9; top: 200px; left: 200px;}
76% {background: yellow; top: 200px; left: 0px;}
100% {background: #F6620C; top: 0px; left: 0px;}
}
      
/*Standard*/
@keyframes nu-exo {
0% {background: #A93A8C; top: 0px; left: 0px;}
32% {background: #E80101; top: 0px; left: 200px;}
64% {background: #F476A9; top: 200px; left: 200px;}
76% {background: yellow; top: 200px; left: 0px;}      
100% {background: #F6620C; top: 0px; left: 0px;}
}
      
.rond {
      position: relative;
   width: 150px;
   height: 150px;
      border-radius: 150px;
      background: #A93A8C;
      -moz-animation: nu-exo 3s ease-in-out 0s infinite alternate;
      -webkit-animation: nu-exo 3s ease-in-out 0s infinite alternate;
      -o-animation: nu-exo 3s ease-in-out 0s infinite alternate;
  animation: nu-exo 3s ease-in-out 0s infinite alternate;
}


<!-- HTML -->
<div class="rond"></div>

Coucou !

Je double-poste (attendez avant de ma frapper) pour dire que je pense avoir terminé ~

Coucou @Shoki !

Désolée du temps de réponse, mais je n'avais pas vu que ton poste était terminé >_< (T'as oublié de mettre la petit icône )

Le tuto est sympa et peut être utile, mais pour certains exemples que tu veux montrer, le forum où tu as fait tes test n'existes plus, du coup je ne peux pas valider tant que tu n'as pas changer ces liens.

Je remets ce sujet en cours et tu n'auras qu'à poster et changer l'icône quand tu auras fini.

Merci ♥

Aaaah j'avais pas vu la réponse, désolée du retard @.@

En fait y'a quelques jours j'ai eu la mauvaise surprise de voir que FA avait supprimé deux de mes forums-test, c'est pour ça que certains liens ont disparus e.e Mais j'ai réglé le problème, normalement il y a toutes les pages qu'il faut, maintenant !

Et bien sûr, j'ai modifié l'icône du coup o/

Je tiens à m'excuser pour ce temps de validation très long >_<

J'ai tout revérifié et tout me semble bon ! J'ai ajouté les tags et je valide. Je vais déplacer ton tuto au bon endroit

Merci pour ton partage Shoki (et tes petits exemples amusants)

Non je ne mettrai pas de mots d'amour dans mon rond, le facteur pourrait les lire