Animation CSS3 header
Rédigé par Daniel - 29 mars 2012
Créer une bannière animée en CSS3 sans Jquery!
Après avoir vu rapidement les effets de transitions CSS3 au passage de la souris, nous allons cette fois nous pencher sur la véritable animation d'une image à l'aide des CSS.
Sans aucune intervention de Jquery qui étatit utilisé jusqu'à présent pour remplacer Flash.
Ce que je cherche à obtenir est une bannière qui défile toute seule, indéfiniment.
Pour cela j'ai choisi une image de nuages, simple mais l'effet est correct.
Deux étapes afin d'obtenir le résultat escompté:
-Définir l'animation
-Appliquer l'animation
Définition de l'animation
On doit tout d'abord définir quel type d'animation appliquer:
@-webkit-keyframes move-header{ from { background-position: 0 -50px;} to { background-position: 2247px -50px;} }
@-webkit pour les navigateurs type Safari, Keyframes pour la position des images clés de l'animation.
Le reste parle de lui même avec position sur X et Y.
Application de l'animation
-webkit-animation: move-header 40s infinite linear;
On applique aussi à chaque navigateur les conditions d'animation.
Nous voyons ici que les possibilités sont infinies et que l'on peut vraiment faire beaucoup de choses intéressantes avec CSS3!
Enjoy!
Développement - Mots clés : CSS3
Bonjour, merci pour ton petit tutorial, j'ai du mal à avoir de bonnes infos sur le CSS3 sur le web mais la j'ai trouvé une mine d'or sur ton blog.
Bonjour, j'ai commencé à m'intéresser au design web depuis quelques mois désormais. Je ne connaissais pas du toute les animations CSS3 dans le header. J'ai donc découvert ceci grâce à votre article et votre blog. Je vous remercie de prendre le temps d'alimenter votre site. A bientôt.
Les commentaires sont fermés.