Day/Night Cycle
Animation CSS pure : un dégradé de ciel parcourt nuit, aube, midi et crépuscule pendant qu'un soleil arc son orbite de l'horizon au zénith — zéro JavaScript, zéro dépendance.
Vous aurez accès à la démo interactive avec un compte gratuit.
Cet effet fait partie d'Effect.Labs — 811 effets vanilla, une partie gratuite, une partie premium. Atmosphère comprend 57 effets, dont 10 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
L'effet repose sur deux @keyframes CSS qui tournent en parallèle à la même durée (12 s, ease-in-out infinite). .daynight-container occupe tout le conteneur (position: absolute; inset: 0) et anime sa propriété background à travers cinq états : nuit profonde (#0a0a2e), aube/crépuscule (#e85d75 en bas), matin doré (#f0c27f en bas), plein midi (#4aa3df en haut) et retour à la nuit. Le dégradé est toujours vertical (linear-gradient, 3 stops) ; seules les couleurs changent à chaque keyframe.
Le soleil (.daynight-sun) est un div de 40 × 40 px, coloré gold avec un box-shadow double (halo proche 30 px + halo large 60 px). @keyframes sunPath interpole trois propriétés : bottom (de −40 px à 80 % au zénith, retour à −40 px), left (50 % → 30 % au lever → 50 % au zénith → 70 % au coucher → 50 %) et opacity (0 sous l'horizon, 1 dès le lever). Ce jeu de coordonnées trace un arc parabolique visible de gauche à droite de la scène.
L'ease-in-out natif CSS lisse la vitesse aux extrémités : le soleil ralentit à l'aurore et au crépuscule, accélère vers le zénith — sans calcul de trigonométrie JS. La durée commune de 12 s garantit la synchronisation parfaite entre le ciel et le soleil à tout instant du cycle, les deux animations partageant le même animation-duration et animation-delay: 0s.
Aucun JavaScript n'est utilisé : pas de requestAnimationFrame, pas de canvas, pas d'API publique. Le label textuel (.daynight-label) se superpose via z-index: 2 et position: relative, restant dans le flux normal du DOM et lisible par les lecteurs d'écran sans attribut aria supplémentaire.
Accessibilité
- prefers-reduced-motion absent du code : l'animation tourne en boucle infinie sans condition. Ajoutez manuellement
@media (prefers-reduced-motion: reduce) { .daynight-container, .daynight-sun { animation: none; } }dans votre feuille de style globale pour figer la scène en état initial. - Le conteneur
.demo-previewn'expose niroleniaria-labeldans le code de base : pour un usage purement décoratif, c'est suffisant. Ajoutezrole="img" aria-label="Cycle jour-nuit animé"si l'animation fait partie du contenu sémantique. - Le texte
.daynight-labelest un<span>dans le flux DOM normal, lisible par les lecteurs d'écran sans attribut supplémentaire. - Aucune interaction clavier ou souris (animation entièrement passive) — aucune gestion du focus n'est requise par l'effet lui-même.
- Contraste du texte sur le fond animé : au keyframe 50 % (plein jour, ciel clair
#e0f0ff), du texte blanc peut passer sous le ratio WCAG AA (4,5:1). Ajoutez untext-shadowou un scrim semi-transparent si vous superposez des CTA.
Compatibilité navigateur
Utilise CSS animation, linear-gradient et box-shadow — supportés dans tous les navigateurs modernes. Zéro dépendance JavaScript.
Sans support des animations CSS, <code>.daynight-container</code> reste dans son état initial (fond bleu nuit <code>#0a0a2e</code>) et le soleil demeure sous l'horizon (<code>opacity: 0</code>) — la page reste lisible, l'effet est absent mais aucune erreur JS n'est levée.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="demo-preview" role="img" aria-label="Cycle jour-nuit animé">
<div class="daynight-container" aria-hidden="true"></div>
<div class="daynight-sun" aria-hidden="true"></div>
<!-- Facultatif : contenu overlay -->
<span class="daynight-label">Day / Night Cycle</span>
</div>HTML + CSS + JS complet, prêt à coller — avec des centaines d'effets premium.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
| animation-duration: 12s | 12s | Durée du cycle complet — modifiez la valeur dans les deux shorthands animation (sur .daynight-container et .daynight-sun). 6 s = démonstration rapide, 20–60 s = ambiance contemplative. |
| Couleurs dans @keyframes dayNightCycle | 5 palettes (nuit / aube / matin / midi / coucher) | Remplacez les hex dans chaque bloc keyframe pour adapter l'ambiance — ex. #87ceeb → #00bcd4 pour un ciel tropical, ou assombrissez tous les tons pour un thème « nuit prolongée ». |
| width/height sur .daynight-sun | 40px | Diamètre du disque solaire. 20 px pour un widget compact, 60 px pour une scène immersive plein écran. |
| box-shadow sur .daynight-sun | gold 0 0 30px, rgba(255,215,0,.4) 0 0 60px | Intensité et couleur du halo solaire. Remplacez gold par #ff6a00 pour un crépuscule chaud, ou #c8e6ff pour un soleil hivernal. |
| bottom: 80% (keyframe 50%) | 80% | Hauteur maximale du soleil au zénith dans @keyframes sunPath. 90 % place le soleil près du bord haut, 55 % le maintient bas sur l'horizon. |
| left: 30% / 70% (keyframes 25% / 75%) | 30% / 70% | Positions horizontales du lever et du coucher dans @keyframes sunPath. 40%/60% pour un arc plus vertical, 15%/85% pour un balayage très étendu. |
| animation-delay (sur les deux éléments) | 0s | Décalage de départ du cycle sur .daynight-container et .daynight-sun. Valeur négative : -6s commence au plein midi, -3.6s au matin doré. En JS : el.style.animationDelay = '-' + offset + 's' appliqué aux deux éléments. |
FAQ
@keyframes synchronisées, aucune dépendance externe. Il fonctionne dans tout environnement HTML statique (email HTML mis à part), sans bundler ni framework.@media (prefers-reduced-motion: reduce) { .daynight-container, .daynight-sun { animation: none; } }. Cela fige la scène dans l'état initial (nuit bleue) sans supprimer les éléments.animation-delay négatif : const s = new Date(); const offset = ((s.getHours()*3600 + s.getMinutes()*60 + s.getSeconds()) / 86400) * 12; [container, sun].forEach(el => el.style.animationDelay = '-' + offset + 's'); — le cycle reste entièrement en CSS.
