Catégories
Apprentissage CSS Formation HTML Web

Animation des pages

Animation, vous avez dit animation ?

Animation ? Vous avez dit animation ?
Et oui, avec le CSS, il est possible d’animer des pages en donnant aux éléments du mouvement.

Qu’est ce qu’une animation en CSS ?

Il existe 3 concepts d’animations en CSS :

  • les transitions qui permettent le passage d’un état A à un état B. Elles nécessitent alors une action de l’utilisateur et se déclenchent seulement après,
  • les animations pour lesquelles l’action de l’utilisateur n’est pas nécessaire pour permettre le passage d’un état A à un état B,
  • et les transformations qui modifient l’aspect d’un élément.

A noter qu’il est aussi possible de mixer ces 3 concepts.

Pour les animations et les transitions, le passage d’un état A vers un état B peut donc se faire de 4 façons différentes :

  • linear : permet d’aller de façon constante de A vers B
  • ease-in : l’animation va lentement au début puis s’accélère dans le temps
  • ease-out : permet d’aller rapidement au début puis de ralentir
  • ease-in-out : l’animation va lentement puis rapidement puis ralenti.

Les transitions

Les transitions permettent de passer de manière fluide d’un état à un autre.
En CSS, une transition regroupe 4 paramètres :

transition-property : {propriété} ;
transition-duration : {valeur} ;
transition-timing-function : {valeur} ;
transition-delay : {valeur} ;

Dans le fichier CSS, il est possible d’écrire les propriétés les unes à la suite des autres. Ou bien en une seule ligne :

transition : {transition-property} {transition-duration} {transition-timing-function} {transition-delay}

La transition se met dans l’élément initial. Ce qui permet ensuite d’avoir la même façon d’être à l’aller et au retour.
Par exemple :

.mydiv {
      opacity : 0.25 ;
      color : #FFFFFF ;
      transition : opacity 0.5s ease-in 1s, color 1s 0.5s ;
}

.mydiv :hover {
      opacity : 1 ;
      color : #BBBBBB ;
}

Les animations

On considère une animation comme étant un passage d’un état à un autre sans intervention de l’utilisateur.
Elles doivent alors être déclarées avant d’être utilisées.

Il y a deux types de déclarations :

  • Lorsque l’on passe de l’état A à l’état B directement
from {
      // propriétés
}

to {
    // propriétés
}
  • Ou bien, lorsque l’on passe par plusieurs étapes entre les 2 états. On indique alors un pourcentage de temps écoulé avant que l’animation ne se lance (va de 0 à 100%)
0% {
      // propriétés
}
35% {
      // propriétés
}
100% {
      // propriétés
}

Les différentes propriétés que l’on peut appliquer à une animation sont les suivantes :

animation-name : {monAnimation};
animation-duration : {temps};
animation-delay : {temps};
animation-iteration-count : {nombre};
animation-direction : {valeur}; 
animation-mode : {valeur};
  • animation-name : permet de récupérer l’animation déclarée auparavant
  • animation-duration : indique combien de temps dure l’animation (en secondes)
  • animation-delay : c’est le délai avant le lancement de l’animation (en secondes)
  • animation-iteration-count : indique combien de fois l’animation s’exécute (soit un nombre soit à l’infini (infinite))
  • animation-direction : défini comment se passe l’animation.

Ses valeurs sont alors :
    normal   : va de 0 à 100% puis recommence à l’infini
reverse    : va de 100 à 0% puis recommence à l’infini
alternate : s’anime dans les 2 sens (effet yoyo)
alternate-reverse

  • animation-mode : détermine comment l’animation se comporte

Ses valeurs sont alors :
    none   : arrête l’animation, ne respecte plus ses règles et reprend les règles de l’élément
backwards : va reprendre les règles définies à 0%
forwards : va reprendre les règles définies à 100%
both  : va reprendre les règles du moment où l’animation s’est arrêtée

Dans le fichier CSS, on peut aussi écrire une animation sur une seule ligne :

animation : {animation-name} {animation-duration} {animation-delay} {animation-iteration-count} {animation- direction} {animation- mode}

Les transformations

Les transformations modifient l’état d’un élément. Il existe différents types de transformations.

L’élément peut se déplacer dans l’espace (en pixel, les valeurs peuvent être négatives) en utilisant la propriété translate.

transform : translate(x,y); 
            translateX(valeur);
            translateY(valeur) ;

On peut aussi changer l’échelle de l’élément (qui est par défaut de 1) en le faisant soit grandir, soit rapetisser. On utilisera alors la propriété scale.

transform : scale(x,y) ;    
            scaleX(valeur) ;
            scaleY(valeur) ;

Il est aussi possible de faire faire des rotations à un élément (selon l’axe des X, des Y ou des Z). On utilisera la propriété rotate (dont la valeur est en degrés).

transform : rotateX(valeur) ;
            rotateY(valeur) ;
            rotateZ(valeur) ;  

A noter que 360° correspond à un tour complet.

Enfin, on pourra déformer un élément sur son axe des X ou des Y en utilisant la propriété skew (sa valeur est en degrés).

transform : skew(valeur) ;
            skewX(valeur) ;
            skewY(valeur) ;         

Il y a la possibilité de mettre plusieurs transformations sur un même élément. Il faudra alors mettre un espace entre chaque.
Par exemple:

transform : scale(2) translate(20px) ;

Toutes les transformations se font par rapport au point d’origine de l’élément.
Il est alors possible de changer ce point en utilisant : transform-origin .

Spread the love

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.