Aller aux menus

#CSS {débutant;}

• Premiers pas
• CSS3
• Tutoriels
• Livre
• Boite à Outils

CSS 3 : Animations et transitions d'images ou d'objets

Sommaire

• Réaliser une transition
• Réaliser une animation
• Lectures complémentaires

Avertissement préliminaire : les trucs qui bougent pourtout, qui scintillent, qui clignotent sans arrêt, ont un haut pouvoir de nuisance sur la concentration et la sérénité du visiteur. Ces techniques sont donc à utiliser avec raison et parcimonie.

Réaliser une transition

Un changement de couleur de fond au survol de la souris, ou au focus d'un lien, se fait par défaut de façon binaire : on passe du tout au rien. À l'aide de transition, on peut faire en sorte que ce comportement se fasse de façon progressive.

L'exemple ci-dessous permet de modifier la transparence de la couleur déclarée en rgba en la faisant passer de 60% (une opacité de 0,4) à une opacité totale. Cette transition s'effectura en 2 secondes de façon constante (accélération linéaire).
Pour les navigateurs plus anciens n'interprétant pas les couleurs rgba, on prendra soin de déclarer, juste avant, le background avec des codes hexadécimaux classiques.

Code HTML

<p id="doigt">
 <a href="#doigt">On ne montre pas du doigt !</a>
</p>

Code CSS

#doigt a {
padding: 10px 10px 10px 77px;
/* pour les vieux navigateurs */
background:#FAC27E url(/images/main.png) no-repeat 5px 10px; 
/* pour les navigateurs récents */
background: rgba(255,140,0,0.4) url(/images/main.png) no-repeat 5px 10px;
border: 1px solid #FF8C00;
border-radius: 5px;
}
p#doigt a:hover, p#doigt a:focus {
color: black;
background-color:#ff8c00; /* pour les vieux navigateurs */
background-color: rgba(255,140,0,1);
transition-property: background-color;
transition-duration: 2s;
transition-timing-fonction: linear;
}

De façon raccourcie, on peut déclarer simplement :

transition: background-color 2s linear;

Au moment de l'écriture de ces lignes, la specification du W3C sur transition n'étant encore qu'à l'état de brouillon, les navigateurs l'implémentent avec des préfixes propriétaires : -moz pour firefox et autre gecko, -webkit pour chrome et safari, et enfin -o pour opera. Seul IE10 implémente(ra) la propriété sans préfixe (et comme c'est au futur, pour l'instant, on met le préfixe).

Le code entier devra donc être :

-webkit-transition: background-color 2s linear;
-moz-transition: background-color 2s linear;
-ms-transition: background-color 2s linear;
-o-transition: background-color 2s linear;
transition: background-color 2s linear;

L'accélération peut prendre d'autres effets plus ou moins sophistiqués. Pour les visualiser, je vous invite à vous rendre sur cette page réalisée par David Catuhe.

Haut

Réaliser une animation

Vous vous demandez bien pourquoi j'ai mis cette stupide petite main devant mon texte hein ? Vous allez comprendre avec cet exemple simpliste qui va tenter d'expliquer le principe d'animation.

Celle-ci se déclare en deux étapes dont l'ordre n'a pas d'importance :

• La première consiste à indiquer, au minimum, le nom que l'on donne à l'animation (animation-name), sa durée (animation-duration) et le nombre de boucles (animation-iteration-count) ;
• pour la seconde, déclarée à l'aide d'une règle intitulée de @keyframes à laquelle on accole le nom de l'animation, on notifie les effets voulus aux moments voulus, ces derniers étant indiqués en pourcentage du temps total déclaré.

L'animation ci-après, qui se déclenche toujours au focus ou au survol de la souris, consiste à faire aller et venir la petite main devant le lien. Quant à la modification de transparence du background, elle va se payer le luxe de suivre le déplacement de l'image.

Code CSS

/* première étape */
p#doigt a:hover, p#doigt a:focus {
background-color:#ff8c00; /* pour les vieux navigateurs */
color: black;
animation-name: doigt; /* nom de l'animation */
animation-duration: 4s; /* temps de l'animation (4s) */
animation-iteration-count: infinite; /* nombre de boucles (infinie) */
animation-timing-function: linear; /* accelération de l'animation (constant) */
}
/* deuxième étape */
@keyframes doigt {
0% {background:rgba(255,140,0,0.4) url(/images/main.png) no-repeat 5px 10px;}
50% {background:rgba(255,140,0,1) url(/images/main.png) no-repeat 50px 10px;}
100% {background:rgba(255,140,0,0.4) url(/images/main.png) no-repeat 5px 10px;}
}

La version raccourcie de la règle pour animation est la suivante :

animation: doigt 4s infinite linear;

Mais là encore il faudra les préfixes propriétaires, ceux du @keyframes s'insérant entre le @ et keyframe. Exemple : @-moz-keyframe.

Haut

Lectures complémentaires

• Spécification W3C
• Introduction aux animations CSS3 (David Rousset)
• Transitions CSS3 (Alsacreations)
• Code Couleur

Haut