L’animation d’objets n’est plus l’adage de JavaScript. Avec @keyframes il est possible de créer des animations simples avec CSS3.
Définition de @keyframes
@keyframes est un règle CSS3 qui permet de créer des animations.
L’animation est créée en modifiant progressivement une série de styles CSS à l’autre. Durant l’animation, il est possible de modifier le styles CSS à plusieurs reprises.
Pour préciser quand le changement de style CSS se produira il est possible d’utiliser les mots-clés from et to ou bien des pourcentages.
- from ou 0%, détermine le début de l’animation.
- to ou 100%, détermine la fin de l’animation.
Avec des valeurs en pourcentages il sera possible de créer des animations plus complexes comme dans le second exemple ci-dessous.
La règle @keyframes, est supporté par Internet Explorer 10, Firefox, et Opera. Pour Safari et Chrome il faudra utiliser la règle alternative .
Syntaxe et propriétés
La règle @keyframes s’utilise avec les propriétés suivantes :
animation-name, permet de nommer une animation. Cette propriété est obligatoire
animation-delay, Impose un délai avant de démarrer l’animation. Valeurs: s (secondes)ou ms (millisecondes)
animation-direction, Indique dans quel sens est joué l’animation lorsque celle-ci se répète. Valeurs : normal (sens identique) et alternate (sens inverse)
animation-duration, Détermine la durée de l’animation. Valeurs : s (secondes) ou ms (millisecondes)
animation-iteration-count, Spécifie le nombre de fois que l’animation sera jouée avant de s’arrêter. Valeurs : un nombre entier ou infinite pour créer un boucle infini.
animation-play-state, Permet de mettre en pause une animation, puis de là reprendre. Valeurs : paused (met en pause) et running (reprend l’animation en cours)
animation-timing-function, Détermine la vitesse d’exécution de l’animation au début, au milieu et à la fin. Valeurs : cubic-bezier(val1, val2, val3, val4), ease, ease-in, ease-out, ease-in-out, linear.
La syntaxe tel que là définit la W3C est : @keyframes animation_name.
Pour le moteur Gecko (Firefox) : @-moz-keyframes.
Pour le moteur Webkit (Chrome et Safari) : @-webkit-keyframes.
Pour le navigateur Opera : @-o-keyframes.
Exemple 1: Faire clignoter un élément
Jouons un peut avec les animation en réalisant un terminal factice dans lequel clignotera l’invite de texte.
linux-lo8i:/var/www #
_
Code source coté HTML
[html] <div id= »terminal »><div id= »textarea »>
<p>linux-lo8i:/var/www # </p><span id= »prompt »>_</span>
</div><!– /textare –>
</div><!– /terminal –>
[/html]
L’élément à faire clignoter est le underscore situé dans l’id prompt.
Code source coté CSS
[css] /* Prompt */#terminal {
background-color: black;
padding: 10px 0 22px 12px;
}
#textarea {
margin: 3px;
}
#textarea p {
color: rgba(10, 225, 10, 1);
float: left;
}
/* animation du prompt */
span#prompt {
animation-name: blinky;
animation-duration: 0.7s;
animation-iteration-count: infinite;
-webkit-animation-name: blinky;
-webkit-animation-duration: 0.7s;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: blinky;
-moz-animation-duration: 0.7s;
-moz-animation-iteration-count: infinite;
-o-animation-name: blinky;
-o-animation-duration: 0.7s;
-o-animation-iteration-count: infinite;
-ms-animation-name: blinky;
-ms-animation-duration: 0.7s;
-ms-animation-iteration-count: infinite;
}
@keyframes blinky {
from {opacity: 1;}
to {opacity: 0;}
}
@-webkit-keyframes blinky {
from {opacity: 1;}
to {opacity: 0;}
}
@-moz-keyframes blinky {
from {opacity: 1;}
to {opacity: 0;}
}
@-o-keyframes blinky {
from {opacity: 1;}
to {opacity: 0;}
}
@-ms-keyframes blinky {
from {opacity: 1;}
to {opacity: 0;}
}
[/css]
Pour réaliser l’animation, il faut ajouter les propriétés animation à l’élément concerné. Ici p#prompt. Pour animation-name le nom sera blinky, la durée sera de 0,7 seconde le tous dans une boucle infini.
Fermer l’accolade, puis ajouter la règle @keyframes suivit du nom de l’animation blinky.
from indique que l’opacité est de 1, to qu’elle passera à 0
Exemple 2 : Faire un bouton qui change de couleur
Dans le précèdent exemple l’animation avait été faite avec from et to. Créant une animation en deux temps. Pour créer une animation sur 3 temps et plus, seul les pourcentages pourront être utilisés. C’est le cas de ce second exemple où le bouton ci-dessous change de couleur 7 fois.
Code source coté HTML
[html] <div id= »button »><p id= »text-button »>Bouton</p>
</div>
<!– /button –>
[/html]
Code source coté CSS
[css] /* Bouton */#button {
padding-left: 30px;
}
p#text-button {
color: #FFF;
font-size: bold;
padding: 10px;
width: 10%;
text-align: center;
/* Annimation du buton */
animation-name: cameleon;
animation-duration: 5s;
animation-iteration-count: infinite;
-webkit-animation-name: cameleon;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: cameleon;
-moz-animation-duration: 5s;
-moz-animation-iteration-count: infinite;
-o-animation-name: cameleon;
-o-animation-duration: 5s;
-o-animation-iteration-count: infinite;
-ms-animation-name: cameleon;
-ms-animation-duration: 5s;
-ms-animation-iteration-count: infinite;
}
@keyframes cameleon {
0% {background-color: #FF5D5D;}
25% {background-color: #FFDF5F;}
50% {background-color: #8EFF61;}
75% {background-color: #60FFB2;}
100% {background-color: #5EB7FF;}
}
@-webkit-keyframes cameleon {
0% {background-color: #FF5D5D;}
25% {background-color: #FFDF5F;}
50% {background-color: #8EFF61;}
75% {background-color: #60FFB2;}
100% {background-color: #5EB7FF;}
}
@-moz-keyframes cameleon {
0% {background-color: #FF5D5D;}
25% {background-color: #FFDF5F;}
50% {background-color: #8EFF61;}
75% {background-color: #60FFB2;}
100% {background-color: #5EB7FF;}
}
@-o-keyframes cameleon {
0% {background-color: #FF5D5D;}
25% {background-color: #FFDF5F;}
50% {background-color: #8EFF61;}
75% {background-color: #60FFB2;}
100% {background-color: #5EB7FF;}
}
@-ms-keyframes cameleon {
0% {background-color: #FF5D5D;}
25% {background-color: #FFDF5F;}
50% {background-color: #8EFF61;}
75% {background-color: #60FFB2;}
100% {background-color: #5EB7FF;}
}
[/css]
Pour résumé, le bouton p#text-button dont l’animation s’appelle caméléon, dont la durée est de 5 seconde, change de couleur 5 fois et se reproduit indéfiniment.
