Voici un tuto vidéo pour apprendre à réaliser 12 animations en CSS. Pour apprendre en pratiquant, nous apprendrons à animer des icônes menu hamburger (bien entendu les animations CSS que nous allons apprendre, pourront être employées à autre chose).
Une icône Hamburger, c'est quoi et pourquoi apprendre à l'animer ?
C'est en général ces trois barres les unes au dessus des autres qui signifient que nous sommes en présence d'un menu que l'on peut ouvrir.
Il y en a quasiment obligatoirement une par site, et on peut les animer !
Le but de ce cours en ligne, n'est pas de collectionner les animations d'icônes, même si c'est assez fun à réaliser, mais bien de devenir meilleur en CSS en proposant notamment un effet de surprise pour votre visiteur, au survol d'un élément.
En effet, pour ce tutoriel, nous allons utiliser des transitions, des animations, utilisez les axes, effectuer des rotations, créer des pseudos éléments, ou encore utiliser des sélecteurs avancés qui sont bien pratiques dans certains cas précis !
Les fichiers sources du cours sont fournis, et vous pourrez soumettre vos questions dans le salon d'entraide du cours si vous êtes bloqués à une étape.
Ça vous tente ? Rendez-vous de l'autre côté pour commencer à coder !
Table des matières de cette formation CSS (durée : 1h12m)
-
Introduction
- Introduction gratuit 00:00:25
- Code source 00:01:37
-
Construction de notre container à animation
- Partie HTML gratuit 00:03:13
- Partie CSS 00:08:29
-
Les Animations
- Animation 1 : Croix basique 00:06:13
- Animation 2 : Croix droite 00:02:22
- Animation 3 : Rapprochement 00:01:24
- Animation 4 : Caret vers le bas 00:04:31
- Animation 5 : Multiples anims 00:06:18
- Animation 6 : Slide 00:01:24
- Animation 7 00:03:37
- Animation 8 : Cercle avec pseudo élément 00:09:50
- Animation 9 : Apparition 00:03:27
- Animation 10 : Toupie 00:02:11
- Animation 11 : Pseudo el + multiples anims 00:08:31
- Animation 12 : Multi barres 00:08:42
- Fichiers sourcestélécharger
- Certificat
Formateur : Enzo Ustariz
-
Excellent tuto !! des videos claires !! des explications claires !!! Franchement cela permet de bien comprendre certaines notions de CSS avec un cas simple comme le menu hamburger. Encore bravo.
-
Très bon tuto ! premièrement cela m'a éclairé davantage sur le Cascade and inheritance en css , en suite j'ai beaucoup appris sur , transition chaining, nth-child(even), nth-child(odd), nth-child(1, etc...), ::before et ::after . Cela m'a permis de renforcer mes bases en CSS Un grand bravo ! surtout pour les explications car c'est le plus important merci encore Enzo :)
-
Avec quelle version de logiciel ce tuto est-il compatible ?CSS
-
Quel est le niveau requis pour suivre ce tuto ?débutant
note moyenne
avis laissés