CSS

Animation CSS3

Transitions, transformation et animations CSS3

Hyperlien réactif en pur CSS avec effets de transition

Si le HTML5 s’accompagne toujours d’un bon « cadriciel », on peut dire que le CSS3 a pour sa part donner un bon coup de bar à jQuery. En grande partie grâce à ses transitions spectaculaires, dégradé, flou, zoom, rebondi... lorsque l’état d’un éléments HTML vient à changer dans le temps et dans l’espace. Je viens de vous décrire la transition CSS3. C’est à dire l’ajout d’un effet dit transitons quand les propriétés d’une élément HTML change, sans utiliser Flash ou Javascript comme dit la W3C, et surtout sans jQuery... Ce qui n’empêche pas le JavaScript de provoquer ses animation.

La transitons s’attache à un élément comme une simple propriété, mais il prend effet seulement lorsque le propriété en question change de valeur. Animez la transition de vos éléments HTML en une ligne de code CSS en modifiant la couleur d’un élément avec les sélecteurs par défaut comme hover, target. Vous pouvez modifier autant de propriétés CSS que vous le souhaitez, autant de fois que vous le souhaitez.

Par exemple si on modifie la largeur d’un élément avec un langage script ou encore en pur CSS avec les sélecteurs comme hover, target.

Il y a 4 propriétés :

transition-delay

Spécifie quand la transition devra commencer

transition-duration

Spécifies le nombre de seconde ou de milliseconde que prendra la transition

transition-property

Spécifie le nom de la propriété CSS affect.é par la transition ;

transition-timing-function

Spécifie le type de vitesse de la transition.

transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;

Ou une combinaison des 4 propriétés de transition :

transition

property duration timing-function delay|initial|inherit;

Il faut spécifier au minimum la propriété affecté et et la duré de la transition.

div {
  transition: width 2s;
} 

div:hover {
    width: 300px;
} 

Exemples de transition simples

Une base de bouton avec un effet de diffusion (fade) lors du changement de couleur de fond avec une transition transition: all 500ms ease;.

<style>
.cBouton {
  background: #c6c3bd;
  color: #f2f2f2;
  padding: 10px;
  display:inline-block;
  text-decoration: none;
  transition: all 500ms ease;
}

.cBouton:hover {
  color: #d6d3ce;
  background: #5d625c;
  text-decoration: none;
}
</style>
<a href="#" class="cBouton">Bouton</a>

Il suffit de modifier une propriété à volonté pour obtenir un effet différent. Laissez aller votre imagination!

<style>
.cBouton.cZoomOut:hover {
  margin-right:20px;
  margin-left:20px;
}
.cBouton.cZoomIn:hover {
  padding-right:20px;
  padding-left:20px;
}
.cBtn.cBordure:hover {
  box-shadow: inset 0 0 0 25px #5d625c;
}
.cBtn.cCercle:hover {
  border-radius:30%;
}
</style>
<a href="#" class="cBouton">Diffusion</a>
<a href="#" class="cBouton cBtnZoomIn">Marge intérieure</a>
<a href="#" class="cBouton cBtnZoomOut">Marge extérieure</a>
<a href="#" class="cBouton cBordure">Bordure</a>
<a href="#" class="cBouton cCercle">Cercle</a>

Transformation CSS

Exemple avec « prefix » -webkit- et -ms- pour la portabilité.

<style>
.cBouton.cRotation:hover {
  -webkit-transform: rotateZ(-30deg);
  -ms-transform: rotateZ(-30deg);
  transform: rotateZ(-30deg);
}
.cBouton.cGrossir:hover {
  -webkit-transform: scale(1.3);
  -ms-transform: scale(1.3);
  transform: scale(1.3);
}
.cBouton.cRetrecir:hover{
  -webkit-transform: scale(0.8);
  -ms-transform: scale(0.8);
  transform: scale(0.8);
}
</style>
<a href="#" class="cBouton cRotation">Rotation</a>
<a href="#" class="cBouton cGrossir">Grossir</a>
<a href="#" class="cBouton cRetrecir">Rétrécir</a>

Animation CSS

Comme la transition et la transformation, l’animation permet à un élément de changer progressivement d’un style à l’autre. Pour utiliser l’animation CSS3, vous devez d’abord spécifier des images clés (@keyframes) pour l’animation. Les images clés contiennent les propriétés que l’élément aura à certains moments.

Propriété

Description

@keyframes

Spécifie le code d’animation

animation

Propriété abrégée permettant de définir toutes les propriétés de l’animation

animation-delay

Spécifie un délai pour le début d’une animation

animation-direction

Indique si une animation doit être exécutée en sens inverse ou en alternance

animation-duration

Spécifie le nombre de secondes ou de millisecondes qu’une animation doit parcourir pour terminer un cycle

animation-fill-mode

Spécifie un style pour l’élément lorsque l’animation n’est pas en cours de lecture (lorsqu’elle est terminée ou lorsqu’elle a un délai)

animation-iteration-count

Spécifie le nombre de fois qu’une animation doit être jouée

animation-name

Spécifie le nom de l’animation @keyframes

animation-play-state

Indique si l’animation est en cours d’exécution ou en pause

animation-timing-function

Spécifie la courbe de vitesse de l’animation avec les valeurs suivantes :

animation-name: test;
animation-duration: 4s; /* ou : Xms */
animation-iteration-count: 10;
animation-direction: alternate; /* ou : normal */
animation-timing-function: ease-out; /* ou : ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */
animation-fill-mode: forwards; /* ou : backwards, both, none */
animation-delay: 2s; /* ou : Xms */

En une seule instruction (attention de respecter l’ordre : duration, iteration-count puis delay).

animation: test 4s 2s 10 alternate ease-out forwards

La règle @keyframes

Lorsque vous spécifiez des styles CSS dans la règle @keyframes, l’animation passe progressivement du style actuel au nouveau style à certains moments. Pour que l’animation fonctionne, vous devez lier l’animation à un élément. L’exemple suivant lie l’animation « kCouleur » au bouton « .cBouton.cCouleur ». L’animation durera 2 secondes et passera graduellement de la couleur d’arrière-plan #c6c3bd à #000000 :

« Animation » simple avec délais combiné avec « @keyframes : from to »

<style>
.cBouton.cCouleur:hover {
  animation: kCouleur 2s;
}

@keyframes kCouleur {
  from {background-color: #c6c3bd;}
  to {background-color: #000000;}
}
</style>
<a href="#" class="cBouton cCouleur">Couleur</a>

L’exemple suivant modifie la position du bouton lorsque l’animation est terminée à 40% et à nouveau terminée à 100% :

<style>
.cBouton.cSaut:hover {
  animation: kSaut 1s;
}

@keyframes kSaut {
  0%, 20%, 60%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
}
  40% {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
  }
}
</style>
<a href="#" class="cBouton cSaut">Saut</a>

Références

• Bouton sensitif en pure CSS