L’oeil humain est très attentif au moindre mouvement.
Je sais pas vous mais à chaque fois que j’aperçois un mouvement, je me sent comme obligé de regarder. C’est instinctif !
Sur internet c’est la même chose, dès que l’on voit une animation, le regard est tout de suite attiré vers elle.
J’avoue être déjà resté plusieurs minutes à survoler un élément parce que je trouvais l’animation magnifique ^^.
Mais il faut faire attention !

Ajouter de l’animation pour montrer que vous êtes une entreprise dynamique n’apportera rien de spéciale bien au-contraire !
Il faut être subtile, guider l’internaute, mettre un élément en avant.
C’est pourquoi je vous conseille fortement d’utiliser l’animation au survole d’un élément comme un lien, une image votre logo ou mieux ! Un bouton qui appel à l’action (Call-to-action)

Je vois beaucoup de sites qui utilisent l’animation pour leur bouton et franchement çà le fait ! Mais attention à ne pas trop en abuser au risque d’énerver l’internaute.
Les animations on cette force d’apporter de l’émotion.
L’utiliser pour améliorer l’expérience utilisateur est le meilleur moyen de faire la différence avec un concurrent qui n’y aurait pas pensé !

Le bout de code que je vais vous présenter est très facile à mettre en place si vous avez accès à votre code html.
Pour ajouter une transition sur vos liens il suffit d’insérer ces quelques lignes css dans la règle a{} entre les balises
Comme sur l’exemple suivant :

a
{
transition : all 0.5s ease-in;
}

Regardez l’exemple ci-dessous :

Quand vous passez le curseur sur le bouton ou le texte il se passe quelque chose.

See the Pen Animated css3 button by Robin (@Robzt) on CodePen.

Çà paraît simple mais il faut y penser !
Vous pouvez également animer votre logo et personnaliser l’animation comme par exemple la marque Pepsi.

Conclusion

Les animations apportent une très bonne expérience utilisateur.
Animez vos liens ou vos boutons “call-to-action” pour ajouter de l’interaction et surprendre vos visiteurs.
Attirez le regard sur un élément précis.