Multiple background animé avec CSS3

L’ajout d’image de fond avec le CSS n’est pas nouveau, cette fonctionnalité a été là depuis toujours. Mais nous étions obligés d’ajouter qu’une seule image sur chaque block.

Maintenant avec l’avènement de CSS3 nous avons la possibilité d’ajouter de multitudes de background.

Mise en place

En css2, pour avoir le résultat attendu, il faudrait ajouter autant de div que d’images qui n’étaient pas propre mais aussi fastidieux.
On aura ce genre de syntaxe un peu superflu :

En CSS3, ce code peut être concaténé en simple propriété background-image, comme suit :

Dans ce code, nous avons ajouté quatre images positionner différemment afin d’avoir un rendu surprenant.

Animer les backgrounds

Dans notre solution, on ne va pas utiliser de javascript mais juste des  animations CSS3 pour avoir un code plus propre.
Sans négliger la syntaxe valide W3C, on va aussi utiliser les propriétés préfixés afin de rendre compatible sur un grand nombre de navigateurs notre code (IE9, Firefox, Opera, Chrome et Safari…)

Une fois que nous avons défini les keyframes , il suffit de spécifier une classe spécifique qui va utiliser l’animation, dans notre cas .weather

Répondre