Animation complète à utiliser "tel quel"

Présentation

Des animations gratuites pour égayer votre site web. Par exemple, et pour commencer des animations pour souhaiter, sur votre site, une bonne année à vos visiteurs

Je vous propose 48 animations au

 

Bonne nouvelle année 2023

Bomfim Marcela

Caractéristiques

  • CSS pur
  • L'année est facilement modifiable dans le HTML
  • Volta Redonda, RJ - Brésil

Image cliquable pour voir l'exemple

bonne annee avec l'une qui remplace l'autre

Références

Site web

[Créé / modifié] [30-12-2021 / 30-12-2021]

CreateJs

Caractéristiques

  • CSS, JS, createJS.js
  • Pour changer le texte "Happy New Year", il faut changer l'image PNG dans le Javascript
  • Jolie animation neigeuse
  • Edmonton, Canada

Image cliquable pour voir l'exemple

bonne annee sous la neige

Références

Site web

Site de l'auteur

Site autre

[Créé / modifié] [30-12-2021 / 30-12-2021]

Crusher Snail

Caractéristiques

  • CSS pur
  • Tout simple avec utilisation du format SVG
  • Inde

Image cliquable pour voir l'exemple

bonne annee avec format SVG

Références

Site web

[Créé / modifié] [30-12-2021 / 30-12-2021]

Design Code Build

- Design Code Build est une académie de conception et de codage pour enfants formidables !

Caractéristiques

  • CSS, JS, rien d'autre
  • Aucune dépendance
  • Pour changer l'année il faut modifier l'image
  • C'est joyeux !
  • La Jolla, San Diego, CA, USA

Image cliquable pour voir l'exemple

bonne annee avec neige et nourriture

Références

Site web

Site de l'auteur

[Créé / modifié] [10-01-2022 / 10-01-2022]

Galvao Clovis

Caractéristiques

  • CSS, JS, P5.js
  • Clovis Neto alias Clovis Galvao
  • Très facile d'ajouter l'année dans le HTML
  • Ça pète au dessus de la ville !

Image cliquable pour voir l'exemple

bonne annee avec ce feu sur la ville

Références

Site web

[Créé / modifié] [25-01-2022 / 25-01-2022]

Hoebregts Louis

Caractéristiques

  • CSS, JS, TweenMax.js
  • L'année peut être insérée si besoin
  • Jolie animation sous la neige
  • Que fait le petit funiculaire? Il hésite à passer à l'année suivante ?
  • Belgique

Image cliquable pour voir l'exemple

bonne annee sous la neige

Références

Site web

Site de l'auteur

[Créé / modifié] [30-12-2021 / 30-12-2021]

Ilithya

Caractéristiques

  • CSS pur
  • Animation cool
  • L'année est facilement modifiable dans le HTML
  • Mexicain habitant Hambourg

Image cliquable pour voir l'exemple

bonne annee avec ballons annonciateurs

Références

Site web

Site de l'auteur

[Créé / modifié] [02-01-2022 / 02-01-2022]

Jangra Ashish

Caractéristiques

  • CSS pur
  • Animation originale mais un peu fatigante à regarder
  • L'année est facilement modifiable dans le CSS (title__inner)
  • Jodhpur, Inde

Image cliquable pour voir l'exemple

bonne annee avec animation coupante

Références

Site web

[Créé / modifié] [02-01-2022 / 02-01-2022]

Kumar Swarup

Caractéristiques

  • CSS, Bootstrap.css, JS, Anime.js, Popmotion.js
  • Vraiment beaucoup de code !
  • Jamshedpur, Jharkhand, Inde

Image cliquable pour voir l'exemple

bonne annee avec symboles informatiques

Références

Site web

[Créé / modifié] [02-01-2022 / 02-01-2022]

Lemoine Vivien

Caractéristiques

  • CSS pur
  • Effet néon !
  • L'année est facilement modifiable dans le HTML
  • Tampa, Floride, USA

Image cliquable pour voir l'exemple

bonne annee avec un effet neon

Références

Site web

Site de l'auteur

[Créé / modifié] [30-12-2021 / 30-12-2021]

Majchi

Caractéristiques

  • CSS, image GIF
  • On peut changer l'année très facilement
  • Il est même possible d'écrire tout autre chose
  • Slovenia

Image cliquable pour voir l'exemple

bonne annee une image GIF et du CSS

Références

Site web

[Créé / modifié] [12-04-2022 / 12-04-2022]

Nod/Ws James

Caractéristiques

  • CSS pur
  • Difficile de faire plus simple !
  • Nécessitera quelques explications pour les non initiés
  • Mexico

Image cliquable pour voir l'exemple

bonne annee avec symboles informatiques

Références

Site web

Site de l'auteur

[Créé / modifié] [02-01-2022 / 02-01-2022]

Stranger In The Q

Caractéristiques

  • JS pur
  • Les années sont facilement modifiables dans le code Javascript
  • Un feu d'artifice agréable et facile à utiliser

Image cliquable pour voir l'exemple

bonne annee avec feu d'artifice

Références

Site web

Site de l'artiste

[Créé / modifié] [10-01-2022 / 10-01-2022]

Tudor Ana

Caractéristiques

  • CSS pur
  • Les années sont facilement modifiables dans le HTML
  • Un changement d'année peut s'apparenter à un retournement se situation

Image cliquable pour voir l'exemple

bonne annee avec glissement

Références

Site web

[Créé / modifié] [02-01-2022 / 02-01-2022]

 

Joyeux anniversaire

Barri aFrias Marco

Caractéristiques

  • CSS pur
  • Animation du fait de la flamme
  • Le destinataire est très facilement modifiable
  • C'est tout petit, c'est tout mimi !

Image cliquable pour voir l'exemple

bon anniversaire avec ce gateau

Références

Site web

[Créé / modifié] [12-05-2022 / 12-05-2022]

Copot Matei

Caractéristiques

  • CSS, JS
  • Les fusées du feu d'artifice, en éclatant, découvrent les lettres
  • Une fois les mots inscrits des ballons viennent emporter les lettres une par une
  • Bratislava, Slovaquie

Image cliquable pour voir l'exemple

bon anniversaire facon ballon, feu d'artifice

Références

Site web

[Créé / modifié] [03-02-2022 / 03-02-2022]

Duerinckx Michael

- Carte 3D
- Pas responsive

Caractéristiques

  • CSS, JS
  • Animation: La carte s'ouvre et se referme
  • Vous pouvez changer très facilement les textes
  • Hampshire, Royaume-Uni

Image cliquable pour voir l'exemple

carte de souhaits de bon anniversaire

Références

Site web

[Créé / modifié] [09-03-2022 / 09-03-2022]

Evans Cassie

Caractéristiques

  • CSS, JS (très peu)
  • Animation: Il n'y a plus qu'à souffler la bougie...
  • ... Voire ajouter un petit texte en dessous
  • Brighton, Royaume-Uni

Image cliquable pour voir l'exemple

bon anniversaire

Références

Site web

[Créé / modifié] [17-02-2022 / 17-02-2022]

Gabi

Caractéristiques

  • CSS, JS
  • Texte facile à changer dans le HTML
  • Catalogne

Image cliquable pour voir l'exemple

bon anniversaire facon champagne et ballons

Références

Site web

[Créé / modifié] [30-12-2021 / 30-12-2021]

Gabi (3)

Caractéristiques

  • CSS, JS
  • Prénom facile à changer dans le Javascript
  • Façon karaoké (avec son)
  • Il est possible de changer le rythme avec le curseur
  • Catalogne

Image cliquable pour voir l'exemple

bon anniversaire facon karaohe

Références

Site web

[Créé / modifié] [19-01-2022 / 19-01-2022]

Nakaya Yusuke

- Le partage, quel beau thème... surtout en ce moment !

Caractéristiques

  • CSS, Normalize.css, rien d'autre
  • Bouger la souris en dehors du gâteau permet de le manipuler
  • Cliquer sur le gâteau en détache une part et la fait disparaitre avec une transition de fondu
  • Très très bonne idée
  • Tokyo, Japon

Image cliquable pour voir l'exemple

souhaiter un bon anniversaire avec une part de gateau

Références

Site web

[Créé / modifié] [09-03-2022 / 09-03-2022]

Popova Alisa

Caractéristiques

  • CSS, JS
  • Texte facile à changer dans le HTML
  • Pas responsive à l'origine, j'ai ajouté une "@media (max-width: 600px)" pour que ça passe mais c'est juste
  • J'aime beaucoup la douceur de ce que propose cette personne. Voir son site sur CodePen et cet autre exemple de douce joyeuseté
  • Ukraine

Image cliquable pour voir l'exemple

bon anniversaire avec des ballons flottants

Références

Site web

[Créé / modifié] [28-04-2022 / 28-04-2022]

Russell Matthew

- Pas responsive, dommage !

Caractéristiques

  • CSS, JS
  • Texte facile à changer dans le HTML
  • Il est possible de changer le rythme avec le curseur
  • Londres

Image cliquable pour voir l'exemple

bon anniversaire facon carte

Références

Site web

[Créé / modifié] [28-02-2022 / 28-02-2022]

Shadeed Ahmad

Caractéristiques

  • CSS pur
  • Texte facile à changer dans le HTML et le CSS
  • À 22 ans se rajoute une année, ce qui fait 23
  • Après le remplacement du 2 par le 3 apparaissent 'bon anniversaire' et le gâteau en arrière plan
  • Palestine

Image cliquable pour voir l'exemple

bon anniversaire facon changement d'annee

Références

Site web

Site de l'auteur

[Créé / modifié] [28-02-2022 / 28-02-2022]

Stanley Lena

- Pas responsive

Caractéristiques

  • CSS pur
  • Texte facile à changer dans le HTML
  • Animation: La carte se déplie au survol
  • Pas responsive mais pour une fois ce n'est pas trop grave, la partie texte reste parfaitement visible, une fois la carte ouverte
  • Angleterre

Image cliquable pour voir l'exemple

bon anniversaire mon ami

Références

Site web

Site de l'auteur

[Créé / modifié] [12-05-2022 / 12-05-2022]

Stanley Lena (2)

Caractéristiques

  • CSS pur
  • Texte facile à changer dans le HTML. Attention ça 'ça dépend', ça dépasse !
  • Animation: En cliquant sur le couvercle la boîte s'ouvre pour laisser sortir le message et les bulles de bonheur
  • Pas responsive mais vu la taille, ça passe
  • Angleterre

Image cliquable pour voir l'exemple

bon anniversaire avec cette boite a souhaits

Références

Site web

[Créé / modifié] [12-05-2022 / 12-05-2022]

Stillhart Patrick

- Pour desktop

Caractéristiques

  • CSS, JS
  • Texte facile à changer dans le HTML, pour ajouter un prénom, par exemple
  • L'intérêt de cette proposition réside dans la possibilité de créer des fusées en cliquant avec la souris
  • Zürich, Suisse

Image cliquable pour voir l'exemple

bon anniversaire facon feu d'artifice

Références

Site web

Site de l'auteur

[Créé / modifié] [12-04-2022 / 12-04-2022]

Zarza Henry

Caractéristiques

  • CSS, JS, rien d'autre
  • Texte très facile à changer dans le HTML
  • Un clic de souris laisse échapper un flot de confettis
  • On peut augmenter la quantité de ballons : 'const QTY_BALLOONS = 20;'
  • On peut modifier la quantité de confettis par explosion : 'number: 70,'
  • Proposition très joyeuse
  • Colombie

Image cliquable pour voir l'exemple

bon anniversaire facon changement d'annee

Références

Site web

Site de l'auteur

[Créé / modifié] [28-02-2022 / 28-02-2022]

 

Joyeux Noël

Aparicio Mike

Caractéristiques

  • CSS pur; image SVG
  • Texte très facile à ajouter dans le HTML... si besoin
  • Il faut survoler le père Noël pour voir s'afficher le texte
  • Chicago, Ilinois, USA

Image cliquable pour voir l'exemple

guirlande pour un joyeux noel

Références

Site web

Site de l'auteur

[Créé / modifié] [25-01-2022 / 25-01-2022]

Hetman Paulina

Caractéristiques

  • CSS, JS
  • On remarque un sapin puis, à l'arrière plan, un décor très futuriste
  • Morceau de musique intégré, facile à changer dans la fonction 'loadMusic()'
  • Paris

Image cliquable pour voir l'exemple

arbre avec guirlandes lumineuses pour un effet festif

Références

Site web

Site de l'auteur

[Créé / modifié] [04-02-2022 / 04-02-2022]

Imapo

Caractéristiques

  • CSS, JS et 2 images
  • Bandeau pratique à utiliser pour un haut de page sans se prendre la tête
  • Impeccable sur mobile
  • Roumanie ou Russie

Image cliquable pour voir l'exemple

guirlande haut de page pour un joyeux noel

Références

Site web

[Créé / modifié] [25-01-2022 / 25-01-2022]

Mitali de Coding Artist

Caractéristiques

  • CSS presque pur, JS
  • Texte très facile à changer dans le HTML
  • Il faut survoler le père Noël pour voir s'afficher le texte
  • Inde

Image cliquable pour voir l'exemple

joyeux noel

Références

Site web

Site de l'auteur

[Créé / modifié] [30-12-2021 / 30-12-2021]

 

Joyeuses Pâques

Anastopoulos Tina

Caractéristiques

  • CSS, JS
  • Petite animation
  • Petit poussin bien mignon
  • Massachusetts, USA

Image cliquable pour voir l'exemple

joyeuses paques avec un petit poussin

Références

Site web

[Créé / modifié] [19-01-2022 / 19-01-2022]

Gabi (2)

Caractéristiques

  • CSS, JS
  • Année facile à changer dans le Javascript
  • Effet 'élastique' de la branche
  • Il faut réduire la taille de l'animation pour qu'elle passe sur mobile (pour faire simple)
  • Catalogne

Image cliquable pour voir l'exemple

joyeuses paques avec ces petits oiseaux sur le branche

Références

Site web

[Créé / modifié] [19-01-2022 / 19-01-2022]

Kaza Chrissa

Caractéristiques

  • CSS, JS, jQuery
  • Rollover sur les oeufs
  • Le clic sur un oeuf en change la couleur
  • Londres, Angleterre

Image cliquable pour voir l'exemple

joyeuses paques avec des oeufs

Références

Site web

[Créé / modifié] [28-04-2022 / 28-04-2022]

Mike Ccrch

Caractéristiques

  • CSS, JS, jQuery
  • Le trait rouge représente un oeuf, le "&" la poule
  • Le texte en français doit être changé dans l'image SVG
  • L'animation est originale
  • Reykjavík, Islande

Image cliquable pour voir l'exemple

bon halloween en tout CSS

Références

Site web

Site de l'auteur

[Créé / modifié] [19-01-2022 / 19-01-2022]

Stanley Lena (3)

Caractéristiques

  • CSS pur
  • Texte facile à changer dans le HTML et le CSS.
  • Animation: Le survol de la carte provoque son inclinaison et son ouverture
  • Pas responsive mais vu la taille, ça passe
  • Angleterre

Image cliquable pour voir l'exemple

jouyeuses paques avec ce petit lapin

Références

Site web

[Créé / modifié] [18-05-2022 / 18-05-2022]

Stanley Lena (4)

Caractéristiques

  • CSS, JS, jQuery
  • Texte facile à changer dans le HTML
  • Animation: Il faut cliquer sur l'oeuf pour l'ouvrir
  • Angleterre

Image cliquable pour voir l'exemple

jouyeuses paques avec l'eclosion d'un oeuf

Références

Site web

[Créé / modifié] [18-05-2022 / 18-05-2022]

 

Bon Halloween

Sanchez Jaume

Caractéristiques

  • CSS pur
  • Tout simple à utiliser
  • Le texte peut être changé dans le HTML
  • L'animation s'arrête si l'on se positionne dessus
  • Barcelone, Espagne

Image cliquable pour voir l'exemple

bon halloween en tout CSS

Références

Site web

[Créé / modifié] [30-12-2021 / 30-12-2021]

 

Saint Valentin

Duo Mimo

Caractéristiques

  • CSS pur
  • Texte facile à changer dans le HTML (class="love")
  • Dédié à Grace, à l'origine !
  • Maryland, USA

Image cliquable pour voir l'exemple

bonne saint valentin avec des roses rouges

Références

Site web

[Créé / modifié] [30-12-2021 / 30-12-2021]

Hetman Paulina (2)

- With Love and Music

Caractéristiques

  • CSS, JS rien d'autre
  • Les petits coeurs circulent dans l'espace
  • Le plus gros coeur rose attend le clic pour prendre vie: Il tourne, grossit et joue de la musique
  • Voir le coeur sur poly.pizza
  • Née en Pologne, habite en France

Image cliquable pour voir l'exemple

saint valentin avec beaucoup de coeurs

Références

Site web

Site de l'auteur

[Créé / modifié] [28-04-2022 / 28-04-2022]

Hoebregts Louis (2)

- Image SVG

Caractéristiques

  • CSS, JS rien d'autre
  • Les coeurs s'échappent de la souris
  • C'est simple et on comprend bien
  • Belgique

Image cliquable pour voir l'exemple

saint valentin avec beaucoup de coeurs

Références

Site web

[Créé / modifié] [04-02-2022 / 04-02-2022]

Mc Kay Darragh

- Pas responsive

Caractéristiques

  • CSS absolument pur
  • Deux coeurs repliés l'un sur l'autre qui s'ouvrent au survol
  • Un petit mot à l'intérieur
  • Beaucoup de tendresse 'simplement exprimée'
  • Irlande

Image cliquable pour voir l'exemple

saint valentin avec deux coeurs l'un dans l'autre

Références

Site web

Site de l'auteur

[Créé / modifié] [08-02-2022 / 08-02-2022]

Mc Nally Chris

Caractéristiques

  • CSS, JS, jQuery, TwennMax, Physics2DPlugin.js
  • Pas mal de dépendances
  • Les coeurs s'échappent de l'enveloppe
  • Le sourire affiché par l'enveloppe est un vrai plus
  • Royaume-Uni

Image cliquable pour voir l'exemple

saint valentin avec des coeurs qui sortent d'une enveloppe

Références

Site web

[Créé / modifié] [04-02-2022 / 04-02-2022]

Sottek Mark

- Il faut absolument cliquer sur l'image pour faire démarrer la musique

Caractéristiques

  • CSS, Normalize.css, JS, jQuery
  • Des coeurs et de la musique
  • Un gros coeur attaché à la sourispour jouer avec les petits
  • De la musique avec Elvis
  • La Nouvelle-Orléans, Louisiane, USA

Image cliquable pour voir l'exemple

saint valentin avec des coeurs et de la musique

Références

Site web

[Créé / modifié] [08-02-2022 / 08-02-2022]

 

Divers

Fitch Eli

- Au revoir 2022 ! Sous entendu: Bonne année 2023... à priori !
- Animation créée le 31 Decembre 2016
- Cette animation se trouve, aujourd'hui, porteuse d'une signification terrible ! J'avoue avoir hésité à la laisser une fois que je m'en suis rendu compte

Caractéristiques

  • CSS, JS, jQuery, Draggable.js, TweenMax.js
  • Il faut saisir l'année et la mettre à la poubelle
  • La poubelle digère, en tremblant, la suppression... et supprime... tout
  • En ces temps de guerre, c'est terrifiant !
  • Brookland, Washington D.C., USA

Image cliquable pour voir l'exemple

bonne annee avec ce feu sur la ville

Références

Site web

Site de l'auteur

[Créé / modifié] [25-01-2022 / 25-01-2022]

Grassi Laura - Programmer's Day

Caractéristiques

  • CSS pur
  • Animation discrète
  • Bonne journée à l'homme de l'ombre qui anime votre écran
  • Sympa !
  • Sao Paulo - Brésil

Image cliquable pour voir l'exemple

bonne journee au programmeur

Références

Site web

[Créé / modifié] [17-02-2022 / 17-02-2022]

Zilyukina Lilya - Grille pain

Caractéristiques

  • CSS, Normalize.css
  • Animation: Grille pain, ravi, d'éjecter deux toasts
  • À mettre tous les matins au petit déjeuner !

Image cliquable pour voir l'exemple

bonne journee de la part du grille pain

Références

Site web

[Créé / modifié] [17-02-2022 / 17-02-2022]