Snippets CSS et Javascript : 14 animations étonnantes à découvrir

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)

(15218)