Effet de transition basique CSS3

Le Ease-in, Ease-out

Grace aux 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;} 

C’est la « transition » qui est décliné par le mouvement « ease-in »  et se déroule durant « 0,4 seconde ».
Nous reviendrons les différences 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égrateurs web donne plus de fluidité dans l’expérience utilisateur, c’est subtil, mais si les simples « hover » lorsque nous survolons un lien ne passe pas d’un état à l’autre de manière brutal comme avant.
Petit exemple

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éments 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 à l’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édéfinie de l’animation qui utilise les principes de la courbe de Bézier qui peu être noté 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 connaissances je vous fais confiance pour voir vos sites dans « les meilleurs sites du mois » 😉