Nous contacter

  1. Accueil
  2. Blog
  3. Webdesign
  4. 15 animations CSS et JavaScript pour Halloween (codes CodePen 2026)

Animation Halloween CSS : 15 codes CodePen vérifiés en 2026

15 animations CSS et JavaScript pour Halloween (codes CodePen 2026)

Dans Webdesign

Une araignée qui donne l’heure. Une citrouille qu’on découpe à la souris. Le tout tient dans un Pen CodePen.

Un client vous demande une touche d’Halloween pour sa page d’accueil ou sa newsletter ? Inutile de partir de zéro. Encore faut-il que le code marche : certaines démos ont plus de dix ans, et leurs images hébergées ailleurs finissent par disparaître.

Le 15 octobre 2026, nous avons ouvert un à un les Pens de cet article. Un seul ne s’affichait plus : nous l’avons retiré. Nous avons ajouté 4 créations d’octobre 2025, issues du défi Halloween de CodePen.

Vous trouverez les 15 animations classées par technique, un tableau pour choisir et la méthode pour en intégrer une sans ralentir votre site.

L’essentiel en 30 secondes

  • Pour une animation d’Halloween en CSS, partez d’un Pen existant. La citrouille de Jaume Sanchez, les araignées de Rachel Best ou le chaudron de hernandack fonctionnent sans une ligne de JavaScript. Copiez le code d’intégration du bouton « Embed » de CodePen, en mode aperçu, pour ne pas alourdir votre page.
  • 4 nouveautés d’octobre 2025 : un chaudron animé avec sin(), une horloge-araignée en GSAP, une citrouille à découper et une citrouille en triangles.
  • Tous les Pens vérifiés le 15 octobre 2026. Un seul, aux images cassées, a été retiré.
  • Les Pens publics sont sous licence MIT : vous pouvez les réutiliser pour un client en gardant la mention de l’auteur.
  • Respectez prefers-reduced-motion : certains visiteurs désactivent les animations dans leur système.

Quelles sont les nouvelles animations Halloween sur CodePen ?

Les 4 animations ci-dessous ont été publiées en octobre 2025, pendant le défi Halloween de CodePen. Chaque lundi du mois, CodePen proposait un thème : le temps, les masques, les tours de magie, puis la fête.

Cette année, le défi d’octobre 2026, « Jest Halloween », porte sur des exercices de JavaScript validés par des tests. Il produit peu de visuels : les créations de 2025 restent donc les plus récentes à vous montrer.

1. Animated Cauldron with CSS Trigonometry, par hernandack

22 octobre 2025 · HTML + CSS

Un chaudron bouillonne entre deux arbres morts d’où sortent des mains crochues. Les bulles montent sur des trajectoires calculées avec la fonction CSS sin() et des propriétés personnalisées. Aucune ligne de JavaScript : c’est le Pen à ouvrir si vous voulez voir ce que la trigonométrie CSS permet aujourd’hui.

Voir le Pen Animated Cauldron with CSS Trigonometry par hernandack (@hernandack) sur CodePen.

2. Halloween - Spider Time, par ikrProjects

9 octobre 2025 · SVG + GSAP

Une horloge à l’heure réelle où l’araignée sert d’aiguille, suspendue au milieu de toiles dessinées en SVG. L’animation repose sur GSAP et son extension MorphSVG, gratuites depuis avril 2025, y compris pour un usage commercial.

Voir le Pen Halloween - Spider Time par ikrProjects (@ikrprojects) sur CodePen.

3. Carve-a-Pumpkin, par Nils Keller

28 octobre 2025 · HTML + CSS + JS

Un couteau remplace le curseur. Tracez une forme fermée sur la citrouille et elle se découpe, bruitage compris. Le plus ludique de la sélection, et un bon exemple d’usage des événements pointer en JavaScript.

Voir le Pen Carve-a-Pumpkin par Nils Keller (@nilskeller) sur CodePen.

4. Trianguloween, par Mads Stoumann

29 octobre 2025 · JS (Delaunay)

Une citrouille composée de triangles, générée par triangulation de Delaunay. Un panneau de réglages permet de changer le nombre de points, les couleurs et l’épaisseur des traits. Plus génératif qu’animé, il charge ses scripts depuis le site de l’auteur : gardez-le pour l’inspiration plutôt que pour la production.

Voir le Pen Trianguloween par Mads Stoumann (@stoumann) sur CodePen.

À retenir : en 2025, les meilleures animations d’Halloween misent sur l’interaction et sur les fonctions CSS récentes, plus que sur la quantité de code.

Quelles animations Halloween fonctionnent en CSS pur ?

Huit animations de la sélection n’utilisent que HTML et CSS. Ce sont les plus simples à intégrer : pas de bibliothèque à charger, pas de script qui bloque l’affichage.

Pour aller plus loin dans ce style, voyez aussi nos illustrations et animations en full CSS.

5. CSS Spooky Halloween Pumpkin, par Jaume Sanchez

2013 · HTML + CSS

Une citrouille qui luit dans le noir, avec son reflet et un « Happy Halloween » manuscrit. Tout est en CSS, ombres et dégradés compris. Treize ans après, elle tient toujours.

Voir le Pen CSS Spooky Halloween Pumpkin par Jaume Sanchez (@spite) sur CodePen.

6. A Halloween weekend, par Amit Ashok Kamble

2014 · HTML + CSS

Une maison hantée sous la pleine lune, des chauves-souris et des escaliers éclairés. Plus de 30 000 caractères de CSS pour une scène complète : de quoi décortiquer la construction d’une illustration en dégradés.

Voir le Pen A Halloween weekend par Amit Ashok Kamble (@amyth91) sur CodePen.

7. Halloween Animation in Pure CSS, par Rachel Best

2016 · HTML + CSS

Des araignées descendent au bout de leur fil au-dessus d’un « Happy Halloween » en lettres gothiques. Zéro JavaScript, et des araignées plutôt sympathiques : vos clients arachnophobes survivront.

Voir le Pen Halloween Animation in Pure CSS par Rachel Best (@rachel_web) sur CodePen.

8. Vampire and Pumpkins (CSS Image), par Michael Zhigulin

2015 · HTML + CSS

Un vampire en flat design qui brandit deux citrouilles. Une illustration entièrement en CSS, facile à recolorer pour l’adapter à une charte graphique.

Voir le Pen Vampire and Pumpkins (CSS Image) par Michael Zhigulin (@michael-zhigulin) sur CodePen.

9. Halloween, par Barney Scott

2015 · HTML + CSS

Un zombie dont vous choisissez les yeux, la bouche et la coiffure dans un panneau de boutons. L’interaction se fait sans JavaScript, uniquement avec des champs de formulaire et des sélecteurs CSS.

Voir le Pen Halloween par Barney Scott (@bmds) sur CodePen.

10. Halloween Icons, par Matthew Claffey

2015 · HTML + CSS

Six monstres en icônes plates : vampire, citrouille, squelette, momie et deux créatures vertes. Idéal pour une bannière ou un bloc de newsletter aux couleurs d’Halloween.

Voir le Pen Halloween Icons par Matthew Claffey (@mattclaffey) sur CodePen.

11. Halloween Pen 2018, par Alex Safayan

2014 · HTML + CSS

Trois têtes rondes, un zombie, un loup-garou et un vampire, animées en CSS. Un style simple et lisible, facile à reprendre pour un avatar ou un loader.

Voir le Pen Halloween Pen 2018 par Alex Safayan (@alexsafayan) sur CodePen.

12. Moon, par Ermysson Silva

2017 · HTML + CSS

Un croissant de lune traversé de nuages. Moins de 4 000 caractères de CSS : le Pen le plus léger de la sélection, parfait pour un fond de page discret.

Voir le Pen Moon par Ermysson Silva (@ermysson) sur CodePen.

À retenir : une animation en CSS pur se copie, se recolore et s’intègre en quelques minutes, sans risque pour la performance.

Quelles animations Halloween utilisent JavaScript ou SVG ?

Trois animations anciennes s’appuient sur JavaScript, en plus des nouveautés de 2025. Elles servent à animer un SVG complexe ou des centaines d’éléments dans un canvas.

Pour ce type de projet, une bibliothèque fait gagner du temps : comparez-les dans notre sélection de 27 librairies d’animation web CSS et JavaScript.

13. Rube Goldberg’s Monster, par Josh Bader

2017 · SVG + JS

Une machine de Rube Goldberg en trait blanc : bougie, couteau, ballon et poulies s’enchaînent autour d’un monstre. Une leçon de mise en scène en SVG animé.

Voir le Pen Rube Goldberg’s Monster par Josh Bader (@joshbader) sur CodePen.

14. Interactive SVG Animation | Trick or treat_, par Issey

2016 · SVG + JS

Un manoir isométrique entre deux arbres. Le texte vous prévient : ne cliquez pas sur la lune. Cliquez quand même. L’animation met quelques secondes à apparaître.

Voir le Pen Interactive SVG Animation | Trick or treat_ par Issey (@issey) sur CodePen.

15. Flocking Candy Corn, par Jeff Thomas

2014 · Canvas + JS

Des bonbons d’Halloween volent en nuée autour d’un « Happy Halloween ». Le mouvement vient d’un algorithme de flocking, le même qui imite les vols d’oiseaux. Une démo canvas pour qui veut aller au-delà du CSS.

Voir le Pen Flocking Candy Corn par Jeff Thomas (@aecend) sur CodePen.

À retenir : JavaScript se justifie dès que l’animation réagit au visiteur ou manipule beaucoup d’éléments.

Quelle animation choisir pour votre projet ?

Choisissez d’après l’endroit où l’animation va vivre. Un bandeau de site n’a pas les mêmes contraintes qu’une page de jeu concours.

  • Un bandeau ou un fond de page : la lune d’Ermysson Silva ou les araignées de Rachel Best, légères et discrètes.
  • Une illustration de newsletter ou de réseau social : les icônes de Matthew Claffey ou le vampire de Michael Zhigulin, en capture d’écran.
  • Une page événementielle : la citrouille à découper de Nils Keller ou le manoir d’Issey, qui invitent à jouer.
  • Une démonstration technique : le chaudron en trigonométrie CSS ou l’horloge en GSAP.
#AnimationAuteurAnnéeTechniqueInteractive
1Animated Cauldron with CSS Trigonometryhernandack2025HTML + CSSNon
2Halloween - Spider TimeikrProjects2025SVG + GSAPNon
3Carve-a-PumpkinNils Keller2025HTML + CSS + JSOui (découpe)
4TrianguloweenMads Stoumann2025JS (Delaunay)Oui (réglages)
5CSS Spooky Halloween PumpkinJaume Sanchez2013HTML + CSSNon
6A Halloween weekendAmit Ashok Kamble2014HTML + CSSNon
7Halloween Animation in Pure CSSRachel Best2016HTML + CSSNon
8Vampire and Pumpkins (CSS Image)Michael Zhigulin2015HTML + CSSNon
9HalloweenBarney Scott2015HTML + CSSOui (boutons)
10Halloween IconsMatthew Claffey2015HTML + CSSNon
11Halloween Pen 2018Alex Safayan2014HTML + CSSNon
12MoonErmysson Silva2017HTML + CSSNon
13Rube Goldberg’s MonsterJosh Bader2017SVG + JSNon
14Interactive SVG Animation | Trick or treat_Issey2016SVG + JSOui (clic)
15Flocking Candy CornJeff Thomas2014Canvas + JSNon

À retenir : plus l’animation est visible longtemps, plus elle doit être légère et discrète.

Comment intégrer une animation CodePen sur votre site ?

Copiez le code d’intégration du Pen et collez-le dans un bloc HTML de votre page. Comptez cinq minutes.

  1. Ouvrez le Pen et cliquez sur « Embed », dans le pied de page de l’éditeur.
  2. Activez l’aperçu cliquable. Le Pen affiche une image fixe avec un bouton « Run Pen » et ne s’exécute qu’au clic : votre page reste rapide.
  3. Copiez le code en version iframe et collez-le dans un bloc HTML. Sur e-monsite, c’est le rôle du widget HTML des pages.
  4. Gardez la mention de l’auteur sous l’animation, comme le demande la licence MIT.
  5. Testez sur mobile : une scène pensée pour un grand écran peut déborder sur un téléphone.

Vous préférez reprendre le code sur votre propre site ? Ajoutez une règle @media (prefers-reduced-motion: reduce) qui coupe ou ralentit l’animation pour les visiteurs qui l’ont demandé. Et si vous voulez créer la vôtre sans partir d’un Pen, Animista génère des animations CSS prêtes à copier.

À retenir : un Pen en aperçu cliquable ne pèse presque rien tant que le visiteur ne le lance pas.

Qu’est-ce qu’un Pen CodePen ?

Un Pen est une démo de code publiée sur CodePen. Cet éditeur en ligne réunit HTML, CSS et JavaScript et affiche le résultat en direct. Chaque Pen public peut être consulté, copié ou intégré sur un autre site. Par défaut, les Pens publics sont placés sous licence MIT.

FAQ : animations Halloween en CSS

Partez d’un Pen existant en CSS pur, comme la citrouille de Jaume Sanchez, et modifiez les couleurs et les durées. Les propriétés @keyframes et animation suffisent pour faire flotter un fantôme ou descendre une araignée. Pour générer une animation de base, essayez Animista.

Les défis d’octobre de CodePen rassemblent chaque année des dizaines de créations sur le thème. Cette sélection en garde 15, vérifiées le 15 octobre 2026. Pour d’autres effets animés, voyez nos 20 exemples d’animations de site web.

Oui. Les Pens publics sont sous licence MIT, qui autorise l’usage commercial à condition de garder la mention de copyright de l’auteur. Vérifiez aussi les images et les sons chargés par le Pen, qui peuvent avoir une autre licence. Pour des visuels libres de droits, piochez dans nos ressources web.

Une intégration classique charge tout le Pen dès l’ouverture de la page. Choisissez l’aperçu cliquable : le Pen ne s’exécute qu’au clic du visiteur. Mesurez ensuite la page avec PageSpeed Insights, présenté dans notre comparatif des outils SEO.

Non pour un mouvement simple : le CSS anime un SVG intégré dans la page. JavaScript devient utile pour des séquences complexes ou une horloge en temps réel, comme celle d’ikrProjects en GSAP. Notre sélection de librairies d’animation web vous aide à choisir l’outil.

Ghost par Sara Linsley

See the Pen Ghost by Sara Linsley (@saraoswald)on CodePen.

SVG Path Animation par Ali Klein

See the Pen SVG Path Animation by Ali Klein (@AliKlein) on CodePen.

Ghost par Alex Bergin

See the Pen Ghost by Alex Bergin (@abergin) on CodePen.

Floating CSS Boo Ghost par Jason Kinney

See the Pen Floating CSS Boo Ghost by Jason Kinney (@jason-kinney on CodePen.