0

Les keyframes CSS3

Bonjour les amis !

Aujourd’hui, je vous parle des animations CSS3, et plus particulièrement des keyframes qui vont vous permettre de gérer finement vos animations grâce à tout plein de paramètres. Alors si ça vous intéresse, on en parle tout de suite.

Les keyframes c’est quoi ?

Comme leur nom l’indique, les keyframes sont littéralement des images-clés (les flasheurs devrait être à l’aise avec ce concept). Elles vont vous permettre de définir l’état de votre style à un moment donné de l’animation. Par exemple, à 25% de l’animation, je souhaite que le fond de mon site soit Vert pomme. Par contre, à 50%, j’aimerais qu’il soit rouge. Cas très fréquent vous en conviendrez…

Afin de définir ces keyframes, nous allons utiliser la syntaxe suivante:

@keyframes couleurs {
    0%   { background-color: #E6E6E6; }
    25%  { background-color: #FF0000; }
    50%  { background-color: #00FF00; }
    75%  { background-color: #FF00FF; }
    100% { background-color: #E6E6E6; }
}

Ici la commande @keyframes nous sert à déclarer que nous allons définir des images-clés pour notre animation.
Le terme Couleurs n’est autre que le nom de notre animation pour lequel nous définissons les keyframes.

Notes: Afin de rendre compatible notre animation avec Chrome, Safari et Opera, il nous faudra dupliquer notre code en le préfixant de cette manière:

@-webkit-keyframes couleurs {
    0%   { background-color: #E6E6E6; }
    25%  { background-color: #FF0000; }
    50%  { background-color: #00FF00; }
    75%  { background-color: #FF00FF; }
    100% { background-color: #E6E6E6; }
}

Une fois nos images-clés définis, il va falloir appeler l’animation dans notre CSS.

Application de l’animation à un élément

Maintenant que les paramètres de l’animation sont définis, nous allons pouvoir l’appliquer à un (ou plusieurs) élément HTML.

#maDiv {
    animation-name: couleurs;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

Ici, dans la même logique que la définition des transitions CSS3, vous allez devoir paramétrer un certain nombre de choses.

animation-name

Ici vous allez définir le nom de l’animation que vous voulez utiliser.

animation-duration

Pas besoin d’être très loquace ici, vous aurez compris que ce paramètre concerne le temps de votre animation. Attention toutefois, nous parlons bien du temps total de l’animation et non pas du temps entre chaque keyframe !

animation-timing-function

Si vous avez l’habitude d’utiliser les animations jQuery, Tweens ou autre, vous devez être à l’aise avec les effets de transition.

Voici les différents effets que vous pouvez appliquer:

  • ease: Valeur par defaut –  Accélèration et décélération en début et fin d’animation
  • ease-in-out: Quasiment similaire au ease. Personnellement, j’ai du mal à voir la différence, veuillez excuser mes yeux abimés.
  • ease-in: Accélère doucement
  • ease-out: Décélère doucement
  • linear: Aucune accélération ou décélération
  • cubic-bezier : Celui-la, on le verra dans un futur article car plus complet mais un peu plus coriace à mettre en place.

animation-delay

Ici, vous allez pouvoir définir le délai après animation.

animation-iteration-count

Ce paramètre va vous servir à indiquer le nombre de fois que l’animation doit être jouée.

animation-direction

Ici, vous allez pouvoir définir le sens dans lequel votre animation doit être jouée.

  • normal: L’animation se jouera dans le sens normal de 0% à 100%.
  • reverse: Ici, elle se jouera de 100% à 0%.
  • alternate: Ce paramètre aura pour effet d’alterner le sens de l’animation. 0% à 100%, puis 100% à 0%, puis 0% à 100%, etc…
  • alertante-reverse: Pareil que alternate, mais cette fois-ci l’animation commencera en inversé (100% à 0%)

Voila, pour les différent paramètres d’animation.

Dernière petite chose. Comme souvent en CSS, il existe une forme raccourcie pour les CSS, animation n’échappe pas à la règle.

#maDiv {
   -webkit-animation: colorchange 2s linear 0s infinite alternate;
    animation: colorchange 2s linear 0s infinite alternate;
}

N’oubliez pas le préfixage, sinon vous aurez des surprises.
Je pense qu’il est inutile de préciser que ce code fonctionne sur les navigateurs récents.

Tester Par pitié, arrêtez ça !

A propos de Romuald

Romuald a écrit 23 articles sur le blog.

Les amis de nos amis sont nos amis, alors partageons !

Laissez un commentaire





Si vous êtes un vrai développeur, vous devez savoir compter.
Alors on vous met au défi !
Si vous réussissez cette épreuve, nous nous ferons une joie de lire votre commentaire.