Les transitions CSS
Les transitions CSS permettent le passage d'un objet d'un état à un
autre d'une manière progressive créant ainsi une animation. Pour
être plus précis, ce type d'animation s'appelle Interpolation de
mouvement.
L'interpolation de mouvement est un principe qui ne date pas d'hier.
En effet, il simplifie nettement la création des séquences animées en
ne fournissant qu'un nombre limité d'images (qu'on appelle des
images clé), et le processus se charge en suite d'en déduire les
images intermédiaires.
Adobe Flash (anciennement Macromedia Flash) est le logiciel le plus
populaire pour avoir pris en charge cette technique pour créer les
animations destinées au Web. Mais, l'interpolation de mouvement est
aussi utilisée au cinéma.
En CSS, on a souvent recours aux transitions avec les pseudo-classes.
Par exemple, après avoir survolé un objet, celui ci se met à bouger
pour correspondre aux styles définis par :hover.
Pour mieux comprendre de quoi il s'agit nous allons créer un objet et
nous allons définir son état survolé (grâce à :hover) deux fois, une
sans transition et l'autre avec transitions.
Survolez le premier carré orange puis le deuxième et jugez par vous
même.
Vous comprenez maintenant c'est quoi une transition? Parfait.
Propriété transition-property
Supposons que nous avons créé un objet dont on a défini l'arrière
plan (propriété background) et la bordure (propriété border), puis
nous avons créé des styles appliquées à une pseudo-classe de cet
objet (:hover par exemple) qui changeront l'arrière plan et la
bordure déjà définis. Si on applique une transition entre l'état initial et
l'état survolé, on imagine que l'arrière plan et la bordure se mettront
à s'animer pour correspondre aux styles définis à :hover. Cependant,
CSS permet de désigner quels sont les propriétés qui devront subir la
transition et quels sont celles qui ne s'animeront pas. Il s'agit de la
propriété transition-property.
La propriété transition-property accepte comme valeur le nom (ou
la famille) de styles sur lesquelles la transition sera appliquée.
Par exemple:
div{
border:solid 1px blue;
background-color:orange;
}
div:hover{
border:dotted 1px green;
background-color:yellow;
transition-property:background;
}
Comme vous le constatez en passant de l'état initial à l'état survolé,
la bordure et l'arrière plan de la balise <div> changeront, mais seule
l'arrière plan subira la transition alors que la bordure changera
instantanément.
Par contre, si on avait mis transition-property:all, dans ce cas toutes
les propriétés auraient subit la transition.
Certains anciens navigateurs ne reconnaissent pas la
propriété transition, il faut donc l'associer au préfixe vendeur. Le style
précédent ressemblerait à ceci:
div{
border:solid 1px blue;
background-color:orange;
}
div:hover{
border:dotted 1px green;
background-color:yellow;
-webkit-transition-property:background;
-moz-transition-property:background;
-o-transition-property:background;
-ms-transition-property:background;
transition-property:background;
}
Propriété transition-duration
Comme son nom l'indique la propriété transition-duration permet de
spécifier la durée de la transition (la durée que mettra l'animation
pour aller de l'état 1 à l'état 2). Elle est exprimée en secondes.
Exemple:
div{
border:solid 1px blue;
background-color:orange;
}
div:hover{
border:dotted 1px green;
background-color:yellow;
transition-property:background;
transition-duration:0.5s;
}
Dans ce cas, l'animation fera une demi seconde. Comme pour la
propriété transition-property il faut prévoir le préfixe vendeur
à transition-duration.
Propriété transition-timing-function
La fonction transition-timing-function permet de définir la cadence
avec laquelle la transition sera faite. Elle permet de changer la
vitesse de la transition au long de sa durée (on parle de la courbe
d'accélération). Les valeurs que cette propriété peut accueillir sont:
ease: le mouvement est rapide au début puis ralentit petit à petit
jusqu'à l'arrêt complet.
linear: le mouvement garde la même vitesse du début à la fin de la
transition.
ease-in: le mouvement commence lentement puis gagne en vitesse
avec le temps.
ease-out: le mouvement est rapide au début puis ralentit à la fin (le
ralenti avec ease-out est moins senti qu'avec ease).
ease-in-out: le mouvement commence lentement et fini lentement,
mais il est plus rapide au milieu de la transition.
Il existe d'autres valeurs mais en général c'est ease qui est utilisé car
elle donne un effet plus spectaculaire à la transition.
Exemple:
div{
border:solid 1px blue;
background-color:orange;
}
div:hover{
border:dotted 1px green;
background-color:yellow;
transition-propertyall;
transition-duration:0.5s;
transition-timing-function:ease;
}
Notez qu'on peut regrouper les propriétés de la transition dans une
seule qui est transition. Le dernier code CSS devient alors:
div{
border:solid 1px blue;
background-color:orange;
}
div:hover{
border:dotted 1px green;
background-color:yellow;
transition:all 0.5s ease;
}
N'oublier pas de prévoir le préfixe vendeur pour que le code soit
compatible avec les anciens navigateurs.
div{
border:solid 1px blue;
background-color:orange;
}
div:hover{
border:dotted 1px green;
background-color:yellow;
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
-o-transition:all 0.5s ease;
-ms-transition:all 0.5s ease;
transition:all 0.5s ease;
}
Propriété transition-delay
La propriété transition-delay permet de retarder le début de la
transition lorsque l’événement qui la déclenche est détecté.
Exemple:
div{
border:solid 1px blue;
background-color:orange;
}
div:hover{
border:dotted 1px green;
background-color:yellow;
transition-propertyall;
transition-duration:0.5s;
transition-timing-function:ease;
transition-delay:1s;
}
Dans ce cas, si on survole la DIV, la transition ne commencera
qu'une seconde après.
Je vous montre maintenant le code du carré orange qui devient un
cercle bleu du début de cette page:
Code HTML:
<div class="cours_transitions"></div>
Code CSS:
.cours_transitions{
width:200px;
height:200px;
background-color:#FF8800;
margin:30px;
cursor:pointer;
-webkit-transition:all 0.5s ease;
-o-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
-ms-transition:all 0.5s ease;
transition:all 0.5s ease;
}
.cours_transitions:hover{
background-color:#003569;
border-radius:100px;
-webkit-transition:all 0.5s ease;
-o-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
-ms-transition:all 0.5s ease;
transition:all 0.5s ease;
}
Ce qui donne le résultat de tout à l'heure:
Vous avez remarqué que j'ai déclaré les transition sur l'état survolé et
l'état initiale de la balise <div>. De cette manière le mouvement se
fera sentir quand on survole l'objet et aussi quand on le quitte.
Exemple: menu accordéon
On va essayer de mettre en pratique les transitions CSS. L'objectif est
de créer un menu dit accordéon. C'est un menu de navigation dont
les entrées s'allongent et se rétractent comme le soufflet d'un
accordéon. Pour faire simple on va agir sur l'épaisseur de la bordure
de chacun des éléments constituant le menu. Associé aux transitions,
la bordure changera d'épaisseur progressivement ce qui fera penser
à un accordéon en action.
Voici le code HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css"
href="[Link]" />
</head>
<body>
<nav>
<div class="exercice_accordeon">Accueil</div>
<div class="exercice_accordeon">Qui sommes-
nous?</div>
<div class="exercice_accordeon">Nos
produits</div>
<div class="exercice_accordeon">SAV</div>
<div class="exercice_accordeon">Contact</div>
</nav>
</body>
</html>
Code CSS:
.exercice_accordeon{
width:200px;
background-color:#CCCCCC;
padding:10px;
margin-bottom:1px;
font:10pt verdana;
color:#FFFFFF;
border:solid 1px #CCCCCC;
cursor:pointer;
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
-o-transition:all 0.5s ease;
-ms-transition:all 0.5s ease;
transition:all 0.5s ease;
}
.exercice_accordeon:hover{
background-color:#FFFFFF;
color:#003569;
border:solid 1px #003569;
border-bottom:solid 60px #003569;
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
-o-transition:all 0.5s ease;
-ms-transition:all 0.5s ease;
transition:all 0.5s ease;
}
Les animations en CSS
Appliquer du mouvement aux éléments HTML
Animer les objets avec les transitions
Nous avons vu dans un chapitre précédent l'animation par transition
CSS. Il s'agit en fait de propriétés CSS qui permettent de changer
progressivement les styles CSS d'un objet en passant d'un état à un
autre, comme par exemple changer la taille, l'angle de rotation, la
couleur... et tout ça, d'une manière progressive (interpolée).
Ces transitions sont souvent appliquées avec des pseudo-classes qui
interprètent les différents états d'un objet.
Exemple:
#objet{
background-color:#E80;
width:200px;
height:100px;
transition:all 0.5s ease;
}
#objet:hover{
background-color:#0A0;
width: 100%;
transition:all 0.5s ease;
}
Dans ce cas on verra passer l'objet HTML identifié par #objet de l'état
normal à l'état survolé avec une transition qui dure une demi
seconde. Si on quitte l'objet de la sourie, il retrouvera son état initial
avec une transition de même durée.
Bien que les transitions on un rendu impressionnant, il restent tout de
même appliquables entre deux états différents d'un objet et leur
lancement se fait par l'intervention de l'utilisateur (comme le survol, le
clic...).
Les animations proprement dites
Les animations en CSS consistent à un ensemble de propriétés qui
permettent de décrire l'évolution d'un objet HTML dans le temps par
le changement de ses propriété CSS. On aura donc des animations
plus poussées que leur homologues en transitions. Mais ce n'est pas
tout, car si les transitions permettent d'appliquer une animation entre
deux états d'un objet, les animations quant à elles permettent de
définir à tout instant l'attitude de l'objet. Plus encore, leur lancement
ne demande pas forcément l'intervention de l'utilisateur et peuvent
donc se lancer automatiquement et se répéter autant de fois que
l'on souhaite.
Pour avoir une idée, l'illustration suivante représente une animation
en CSS:
Personnaliser son animation
Vous vous êtes certainement rendu compte que l'on peut réussir des
animations compliquées sans vraiment utiliser des langages de
scripts comme Javascript. De simples déclarations CSS suffisent pour
parvenir à ses fins.
Dans ce qui suit nous allons voir les différentes propriétés qui gèrent
les animations afin que vous puissiez personnaliser celles ci à votre
goût.
Appliquer une animation à un objet: animation-name
Pour qu'un objet HTML soit animé, il faut le doter de la propriété
CSS animation-name. Cette propriété permet d'identifier la suite
d'animations à lui appliquer parmi d'autres (s'il en existe sur la page
courante).
Cette propriété (animation-name) accepte comme valeur un mot
de votre choix. Si des animations différentes sont présentes sur la
même page, alors il faut veiller à ce que la valeur de animation-
name soit unique pour éviter tout conflit.
Exemple:
#objet{
width:100px;
height:100px;
background-color:#E80;
animation-name:monanimation;
}
Définir la séquence d'animations à associer à un objet:
@keyframes
Pour définir la séquence d'animation voulu, on aura recourt à une
règle @ (dite règle at) (comme celles qu'on a vu pour @media...).
Cette règle s'appelle @keyframes et c'est elle qui contiendra les style
de chaque cas (une sorte d'image clé pour les animations
interpolées).
Le code suivant illustre la déclaration de @keyframes avec quelques
styles-clés:
<style>
#objet{
width:100px;
height:100px;
background-color:#E80;
animation-name:monanimation;
}
@keyframes monanimation{
0%{
width:100px;
height:100px;
background-color:#E80;
}
50%{
width:100px;
height:100px;
background-color:#0A0;
border-radius:100px;
transform:rotate(90deg);
}
100%{
width:100px;
height:100px;
background-color:#E80;
transform:rotate(180deg);
}
}
</style>
Expliquons ce code:
Comme nous avons doté l'élément #objet de la propriété animation-
name:monanimation, alors il faut spécifier les différents styles-clés qui
correspondent à ce nom là (monanimation), et c'est justement le
rôle de @keyframes monanimation qui signifie que l'ensemble des
styles-clés qui suivent seront appliqué à l'élément #objet.
La règle @keyframes renferme tous les styles-clés de l'objet spécifié
avec animation-name et ces styles là il faut les déclarer tous entre
deux accolades ouvrante et fermante {}.
Les styles-clés sont spécifiés avec des valeurs en pourcentage. Par
exemple, si l'animation dure 2 secondes alors 0% signifie l'instant 0s,
50% signifie l'instant 1s et 100% signifie l'instant 2s.
Chaque valeur en pourcentage contient l'ensemble des styles-clés
qui seront appliqués à l'instant approprié. Le changement de ces
styles (entre un instant et l'instant suivant) se fait d'une manière
progressive ce qui crée l'animation voulue.
Définir les propriétés de l'animation
Pour personnaliser une animation, il suffit de définir les styles voulues
aux instants-clés. Cependant, il reste des choses qu'il faut renseigner
au navigateur pour qu'il puisse jouer l'animation convenablement
comme la durée, le répétition, le rythme entre séquences, l'ordre...
Durée de l'animation: animation-duration
Il s'agit de la durée total de l'animation entre l'instant 0% et l'instant
100%. Donc, on peut s'amuser à ajouter des styles-clés sans modifier
la durée total de l'animation.
Pour définir la durée de l'animation (ainsi que toutes les propriétés qui
vont suivre) on la déclare dans l'objet dans le même block de styles
que animation-name.
#objet{
width: 100px;
height: 100px;
background-color: #E80;
animation-name: monanimation;
animation-duration: 1s;
}
Rythme entre séquences de l'animation: animation-timing-function
Comme pour les transitions, elle permet de changer la vitesse de
l'animation entre deux séquences voisines (on parle de la courbe
d'accélération). Les valeurs que cette propriété peut avoir sont:
ease: le mouvement est rapide au début puis ralentit petit à petit
jusqu'à l'arrêt complet.
linear: le mouvement garde la même vitesse du début à la fin de la
transition.
ease-in: le mouvement commence lentement puis gagne en vitesse
avec le temps.
ease-out: le mouvement est rapide au début puis ralentit à la fin (le
ralenti avec ease-out est moins senti qu'avec ease).
ease-in-out: le mouvement commence lentement et fini lentement,
mais il est plus rapide au milieu de la transition.
#objet{
width: 100px;
height: 100px;
background-color: #E80;
animation-name: monanimation;
animation-duration: 1s;
animation-timing-function: ease;
}
Délai avant démarrage de l'animation: animation-delay
Cette propriété définit la durée d'attente avant de lancer
l'animation. Cette durée est calculée à partir de l'instant du
chargement total du contenu de la page. Si elle n'est pas définie
alors elle vaut par défaut 0s et l'animation commence
instantanément.
#objet{
width: 100px;
height: 100px;
background-color: #E80;
animation-name: monanimation;
animation-duration: 1s;
animation-timing-function: ease;
animation-delay: 5s;
}
Nombre de répétitions de l'animation: animation-iteration-count
La propriété animation-iteration-count définit le nombre de fois que
l'animation sera jouée. Par défaut elle vaut 1 et l'animation se joue
donc une seule fois puis s'arrête. Si on veut que l'animation tourne à
l'infinie alors on applique la valeur infinite.
#objet{
width: 100px;
height: 100px;
background-color: #E80;
animation-name: monanimation;
animation-duration: 1s;
animation-timing-function: ease;
animation-delay: 5s;
animation-iteration-count: infinite;
}
Sens de l'animation: animation-direction
La propriété animation-direction permet de définir le sens du
mouvement. Elle peut accueillir les valeurs suivante:
normal: (valeur par défaut) l'animation sera jouée dans le sens
normal de l'instant 0% à 100%
reverse: l'animation sera jouée dans le sens inverse, donc de 100% à
0%
alternate: l'animation sera jouée dans les deux sens, de 0% à 100%
puis de 100% à 0% de manière consécutive.
#objet{
width: 100px;
height: 100px;
background-color: #E80;
animation-name: monanimation;
animation-duration: 1s;
animation-timing-function: ease;
animation-delay: 5s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
Exemple
<style>
#objet{
width:100px;
height:100px;
background-color:#E80;
animation-name:monanimation;
animation-iteration-count:infinite;
animation-duration:2s;
animation-timing-function:ease;
animation-direction:normal;
}
@keyframes monanimation{
0%{
width:100px;
height:100px;
transform:translate(0,0) rotate(0);
background-color:#E80;
}
25%{
width:100px;
height:100px;
transform:translate(100%,0) rotate(-90deg);
background-color:#0A0;
}
50%{
width:100px;
height:100px;
transform:translate(100%,100%) rotate(-
180deg);
background-color:#F0F;
}
75%{
width:100px;
height:100px;
transform:translate(0,100%) rotate(-270deg);
background-color:#00A;
}
100%{
width:100px;
height:100px;
transform:translate(0,0) rotate(-360deg);
background-color:#E80;
}
}
</style>
