Tutos CSS - Animation

Un peu d'histoire sur l'animation...

L'animation, c'est pas nouveau.
On même dire que cela remonte au Folioscope (ou flipbook). Vous savez : ce petit carnet qui en tournant rapidement les pages créait cette sensation d'animation ?
Depuis, l'animation s'est installée un peu partout, notamment dans le monde de l'audiovisuel.
Mais Internet n'est pas reste. Territoire longtemps occupé par le célèbre plugin Flash® (qui depuis a disparu), l'animation sur le web, a été petit à petit récupérée par le langage CSS.
Au fil du temps, de nouvelles propriétés sont apparues. Elles permettent aujourd'hui de donner vie à nos interfaces. Plus besoin de plugin, de librairie javascript lourde : aujourd'hui il est possible de créer des animations en CSS, tout en conservant des performances web acceptables (et comme vous le savez, c'est un point important pour votre référencement naturel).
 

Comment créer une animation avec le CSS ?

Le langage CSS permet de créer différents types d'animations.
Par exemple, vous allez pouvoir ajouter des effets de survol sur vos boutons. Ajouter des animations de menu. Ou bien mettre en place des fonds en motifs animés grâce au CSS.
Cela vous permettra d'améliorer l'expérience utilisateur de vos interfaces.

Quelles sont les propriétés d'animation ?

Nous n'allons pas les citer toutes ici (c'est à ça que servent nos cours en vidéo ? ), mais en voici quelques unes, histoire de vous donner une idée de ce qu'il est possible de faire. On parle d'animation rien qu'en CSS, sans Javascript.

• transition CSS : c'est ce qui va contrôler la vitesse d'exécution de vos animations.
• animation duration : cette propriété CSS détermine la durée d'une animation pour parcourir un cycle.
• animation-fill-mode précise comment appliquer un style en début et en fin d'animation.
• ease in / out : permettra de mettre en place des effets de transitions avec plus ou moins d'accélération ou de décélération.
• animation delay : indique la durée d'attente avant de démarrer une animation.
• transform origin : utiliser pour modifier l'origine du repère lorsque vous souhaitez appliquer une transformation à un élément.
• animation-timing-function  : fixe la manière dont l'animation va se dérouler en fonction de chaque cycle.
• animation iteration count : détermine le nombre de fois que l'animation se jouera avant de s'arrêter...

Des librairies d'animation CSS pour aller plus vite...

Pour vous aider dans le travail d'animation, il existe des librairies spécialisées.
Parmi les plus connues on peut citer Animate.css ou encore Hover.css. Elles vous permettront de gagner du temps dans la mise en place de vos animations.

Nos cours en vidéo pour apprendre à animer en CSS

Vous l'avez compris, il est important pour un développeur front-end de savoir ajouter un peu de vie et de mouvement dans ses interfaces. Utilisées avec parcimonie, les animations CSS peuvent vous démarquer de la concurrence, rendre vos interfaces plus agréables à utiliser.
Nos cours en vidéo vous permettront d'acquérir toutes les compétences indispensables pour maîtriser les règles CSS pour animer. Apparition de menu, sticky menu, animations de dégradés, de bouton : vous allez apprendre énormément de notions sur l'animation et l'utilisation des images clés (keyframes).

Liens utiles

• Tutos CSS gratuits