C’est étonnant les résultats que l’on peut obtenir avec quelques lignes de CSS et de Javascript ! Les 14 snippets sélectionnés dans cet article vont du simple loader à de véritables mini-scènes d’animation en passant par des titres animés.
Vous pouvez ainsi découvrir les coulisses de ces animations et réutiliser des bouts de codes pour créer vos propres animations ! D’ailleurs, j’ai aussi sélectionné pour vous en fin d’article 3 tutos qui vous aideront à maîtriser les animations CSS.
1. Sous-marin CSS
See the Pen Submarine with CSS by Alberto Jerez (@ajerez) on CodePen.0
2. Loader SVG/CSS
See the Pen Loader SVG/CSS by Bidji (@Bidji) on CodePen.0
See the Pen Loader SVG/CSS by Bidji (@Bidji) on CodePen.
3. Oiseau qui s’endort
See the Pen Dozing Bird by Peter Klein (@pmk) on CodePen.0
See the Pen Dozing Bird by Peter Klein (@pmk) on CodePen.
4. Animation Star Wars The Force Awakens
See the Pen Star Wars: The Force Awakens in CSS by Donovan Hutchinson (@donovanh) on CodePen.0
See the Pen Star Wars: The Force Awakens in CSS by Donovan Hutchinson (@donovanh) on CodePen.
5. Animation CSS système solaire
See the Pen Solar System animation – Pure CSS by Malik Dellidj (@kowlor) on CodePen.0
See the Pen Solar System animation – Pure CSS by Malik Dellidj (@kowlor) on CodePen.
6. Animation CSS appareil photo flat
See the Pen Flat design camera with CSS animation by Damien Pereira Morberto (@damienpm) on CodePen.0
See the Pen Flat design camera with CSS animation by Damien Pereira Morberto (@damienpm) on CodePen.
7. Simulation Jour/Nuit CSS
See the Pen Day Night simulation by Szymon Stypa (@Catagen) on CodePen.
See the Pen Day Night simulation by Szymon Stypa (@Catagen) on CodePen.0
8. Animation de titre
See the Pen Title Text Animation by Robin Treur (@RobinTreur) on CodePen.0
See the Pen Title Text Animation by Robin Treur (@RobinTreur) on CodePen.
9. Animation de typographie
See the Pen Typography Animation by Georgi Nikoloff (@gbnikolov) on CodePen.0
See the Pen Typography Animation by Georgi Nikoloff (@gbnikolov) on CodePen.
10. Animation de texte
See the Pen Simple Typing Carousel by Gregory Schier (@gschier) on CodePen.0
See the Pen Simple Typing Carousel by Gregory Schier (@gschier) on CodePen.
11. Animation de titre SVG
See the Pen Animating SVG text by Fabio Ottaviani (@supah) on CodePen.0
See the Pen Animating SVG text by Fabio Ottaviani (@supah) on CodePen.
12. NES Full CSS
See the Pen Full CSS NES by Vincent Durand (@onediv) on CodePen.0
See the Pen Full CSS NES by Vincent Durand (@onediv) on CodePen.
13. Icône SVG Pure CSS
See the Pen Pure CSS Responsive SVG Icon by SUBHENDU GHOSH (@subho) on CodePen.0
See the Pen Pure CSS Responsive SVG Icon by SUBHENDU GHOSH (@subho) on CodePen.
14. Usine CSS
See the Pen CSS Factory by Noel Delgado (@noeldelgado) on CodePen.0
See the Pen CSS Factory by Noel Delgado (@noeldelgado) on CodePen.
3 tutos pour vous aider à maîtriser les animations CSS
Les animations en CSS3 (23mn) – Gratuit
Tuto Créez une barre de compétence animée en CSS3 (30mn)
Tuto Créer un background animé avec les keyframes en CSS3 (41mn)
(15224)