Effet de transition basique CSS3

Le Ease-in, Ease-out

Grace au nouvelles fonctions CSS3 il est possible d’ajouter des animations sur son site sans utiliser de Javascript et très simplement.

C’est un effet qui permet de découper un transition d’un état à un autre dans un temps donné, elle s’écrit très simplement :

.div{transition : ease-in 0.4s;} 

l’action est c’est la « transition » qui est décline par le mouvement « ease-in »  et se déroule durant « 0,4 seconde ».
Nous reviendrons le les différence entre les déclinaisons de mouvement plus tard dans l’article.

Le dégradé

Vous avez peut être remarqué que les sites actuels, les intégrateur web donne plus de fluidité dans l’experience utilisateur, c’est subtile, mais si les simple « hover » lorsque nous survolons un lien ne passe pas d’un etat à l’autre de manière brutal comme avant.
Petit exemple

  • Lien simple
  • Lien transition

pour réaliser cet effet il vous faut mettre l’effet de transition dans l’état de départ pour lui assigné un nouvel etat au survol :

.div{background: couleur1; transition:ease-in 0.4s;}
.div:hover{background: couleur2;}

Après c’est à vous de jouer si vous voulez modifier la couleur des « border » du texte ou autre…

Le déplacement

En effet ce qui est intéressant c’est la possibilité de déplacer des élément animé.
De la même manière que l’on utilise le dégradé nous pouvons aussi animé le placement d’un « background-position » ce qui peu crée de très beau effet de panneau arrivant du haut au autre direction.

.div{background: url(« ../monimage.png ») top center; transition:ease-in 0.5s;}
.div:hover{background-position: bottom center;}

Je vous laisse tester c’est un effet bien utile, vous pouvez utiliser des png avec un parti transparent et l’autre coloré, des transparences ….

Les différentes animations

La différence entre le Ease-in, Ease-out … ce sont des courbes d’accélération prédefini de l’animation qui utilise les principe de la courbe de Bezier qui peu être noter par exemple :

transition: cubic-bezier(0.6, -0.28, 0.74, 0.05) 0.5s;

cela vous permet de faire des effets de rebond, de retour en arrière, d’accélération et freinage, de choc…

Avec ces nouvelles connaissance je vous fait confiance pour voir vos site dans « les meilleurs site du mois » 😉

Laisser un commentaire

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