Technique
- CSS Animation
- CSS Transition
Jusqu'à une période récente, les animations n’existaient pas en CSS, il fallait obligatoirement utiliser le langage de programmation Javascript pour rendre une page web interactive. Gérer les animations en Javascript s'avère périlleux, pour plusieurs raisons :
- La syntaxe est plus compliquée que dans d’autres langages de programmation (comme Python).
- En plus des concepts de programmation basiques (variables, boucles, conditions, fonctions), il faut apprendre et comprendre la notion d'événement, qui n'existe pas dans tous les contextes.
- Il faut également très bien comprendre la construction de l’arbre HTML, pour pouvoir apprendre le DOM (Document Object Model). Il s'agit d'une série de fonctions et d'objets programmatiques pré-definis qui permettent de manipuler l’arbre HTML, et qui s'ajoutent aux objets et fonctions basiques du langages de programation Javascript.
- Une feuille de script peut alourdir fortement les besoins en puissance de calcul, et de ce fait, ralentir la page et la rendre plus consomatrice en ressources.
Les animations et transitions CSS permettent de réaliser des animations de manière beaucoup plus légère en termes de complexité d'écriture et de vitesse de calcul. Néanmoins, elles ne peuvent absolument pas remplacer tous les usages de Javascript côté client, ce qui rend son apprentissage obligatoire pour qui se destine au développement web.
CSS Animations
Les animations CSS permettent de faire passer une série de commandes appliquées à un élément HTML à une autre série de commandes. Elles sont basées sur un principe d’images-clés (keyframes), qui définissent les étapes par lesquelles l’animation passe. La construction d’une animation en CSS se fait en deux temps:
- La définition, qui détaille les différents frames.
- L’application à l'élément HTML, grâce à une série de commandes CSS, qui définissent, les transitions, le nombre de répétitions... et d'autres paramètres globaux.
Définition
On définit une animation grâce à la règle @ keyframes, @keyframes, suivie du nom de l’animation. À l’intérieur des accolades qui délimitent cette règle, nous allons pouvoir détailler les frames de notre animation, c'est-à-dire les étapes par lesquelles elle doit transitioner. Les étapes peuvent se définir grâce à des mots-clés (from, to) ou des pourcentages, qui définissent précidément à quelle étape de l’animation.
@keyframes daynight{
0%{
background: white;
}
100%{
background: black;
}
}Une fois que notre animation est définie, il nous faut l’appliquer à un élément HTML, et définir ses modalités d’application. Plusieurs commandes le permettent, voici les principales (liste complète disponible ici) :
- animation-name > Applique une animation pré-définie avec la at-rule keyframes à un élément.
- animation-duration > Sépcifie la durée de l’animation.
- animation-direction > Spécifie le sens de lecture de l’animation.
- animation-iteration-count > Spécifie le nombre de répétition de l’animation, à partir du chargement de la page.
- animation-timing-function > Spécifie la manière dont l’animation progresse.
- animation-fill-mode > Définit la manière dont une animation est apliquée à sa cible avant et après son exécution (permet par exemple, de garder le dernier frame appliqué sur l’élément).
Pour qu’une animation soit lancée, je dois obligatoirement spécifier son nom (animation-name), ainsi que sa durée (animation-duration). Les autres paremètres sont optionnels.
body{
animation-name: daynight;
animation-duration: 3s;
}Application
Je peux ensuite ajouter des paramètres, afin de mieux controler la manière dont mon animation est jouée.
body{
animation-name: daynight;
animation-duration: 3s;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-timing-function: linear;
}Parce-que je suis une personne occupée, un raccourci (shorthand), animation existe, permettant de définir la plupart des paramètres d’une animation en une seule commande.
body{
animation: daynight 3s linear alternate infinite;
}Maintenant que je maîtrise ce concept, je peux me permettre d’ajouter une étape dans mon animation.
@keyframes daynight{
0%{
background: white;
}
50%{
background: darkblue;
}
100%{
background: black;
}
}Exemples
Trois exemples pré-codés qui montrent les possibiliés des animations :
- Daynight > la démo précédente, avec les trois étapes décomposées.
- Looping Sun > la démo précédente, dans une version plus ellaborée.
- Flexible or Not > un exemple d’animation de texte.
CSS Transitions
Les transitions CSS, contrairement aux animations, sont déclenchées par une modification de l’élément HTML, le plus souvent déclenchée par une action de l’utilisateur, comme le survol. Elle permettent de transitioner une ou plusieurs propriétés CSS de leur état initial vers leur état actif (lorque l’action de l'utilisateur est performée). Comme les animations, elles acceptent plusieurs paramètres, qui peuvent aussi être condensés en une ligne. Contrairement aux animations, elles ne permettent pas de mettre en place des étapes différentes de l’état initial et final.
body{
background: white;
min-width: 100%;
min-height: 100vh;
transition: background 1s;
}
body:hover{
background: black;
}Exemples
Deux exemples pré-codes de transitions CSS :
- Daynight Transition > la démo précédente.
- Blank Text > un exemple plus complexe, qui permet de cacher / montrer du texte transitionant au survol.