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.
Tu peux pas donner un exemple au lieu de parler d'"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 !
Je précise que j'ai déjà fait ce tutoriel sur un autre forum, même si je vais remanier mes explications pour ici.
Au passage, je m'excuse s'il y avait déjà un tutoriel sur ça x:
Ne fonctionne pas sur les versions d'Internet Explorer (Microsoft Edge) antérieures à la 10 ! Bien veiller à mettre des préfixes. Tutoriel sur les préfixe :
ici.
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.
J'ai pas envie de me contenter de changer uniquement la couleur de fond...
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 !
Ouais, c'est joli ton truc, mais la second partie du code, c'est quoi ?
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é !
- animation-name :Ici, pas très compliqué à comprendre : le nom de l'animation (ici nuxemple)
- 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)
- 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)
- 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)
- 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)
- 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é.
C'est quoi les valeurs de "animation-timing-function" ? Avec des détails si possible.
Avant d'expliquer cela, il faut savoir qu'on retrouve ces timing-function dans les transitions
• ease : Début rapide, ralenti sur la fin. Valeur par défaut.
• linear : Vitesse constante sur toute la transition.
• ease-in : Début lent, s'accélère de plus en plus.
• ease-out : Début rapide, ralenti de plus en plus.
• ease-in-out : Début et fin de la transition lents.
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...
Je n'utilise pas les préfixes pour cet exemple, mais n'oubliez pas de les mettre !
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;}
}
Je veux pas mettre du rose, c'est pas viril...
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>
C'est donc la fin de ce tutoriel. Je ne vous ai ici appris que les bases, mais sachez qu'en creusant un peu, vous pourrez faire de belles choses ! Attention toutefois à ne pas en abuser, vous pourrez faire mal aux yeux de ceux qui regarde votre carré magique ~ Néanmoins, voici les différents points importants à retenir :
• N'oubliez pas de donner un nom à votre animation ;
• Peut importe le nombre de % que vous mettez,
une animation doit toujours commencer par 0% et finir par 100% ;
• Pour une animation ne comprenant que deux couleurs (ou autre), écrire
- Code:
@keyframes nomAnimation {
from {propriété: valeur;}
to {propriété: valeur;}
}
• Si vous voulez que votre élément bouge durant l'animation, n'oubliez pas de le mettre en position relative, absolue ou fixe ;
• Suivant vos %, l'animation n'ira pas forcément à la même vitesse d'un endroit à l'autre ;
• Arrivé à sa fin, l'animation s'arrête brutalement. Si vous voulez contrer ça, utilisez des méthodes telles que
- Code:
animation-iteration-count: infinite;
• Si vous voulez raccourcir au maximum votre code, utilisez la super-propriété
animation, qui s'écrit :
- Code:
animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;
(remplacer les propriétés par des valeurs)
A vous de jouer maintenant !
Le code est compatible avec la dernière version de Firefox, Edge et Chrome... le reste n'a pas été testé.
Kanae de Never-Utopia</a></div>
