Transitions et animations
Les transitions et animations font partie des domaines les plus excitants des spécifications CSS3, mais également en plein brouillon. Seuls les navigateurs les plus évolués reconnaissent ces effets (par exemple Firefox 4+ et Internet Explorer 10). Nous avons publié un article détaillé dédié à ces fonctionnalités sur Alsacréations : "Transitions CSS3". N'hésitez pas à le parcourir pour bien comprendre leur mise en application.
Pour Goetter.fr, je me suis quelque peu "lâché" au niveau des animations. Je vous propose la syntaxe que j'ai employée lors du survol des livres publiés, dont l'effet est de décaler l'image vers le haut. J'ai employé la propriété de transformation et de translation pour produire le résultat souhaité :
footer img {
-webkit-transition: -webkit-transform 0.8s ease;
-moz-transition: -moz-transform 0.8s ease;
-ms-transition: -ms-transform 0.8s ease;
-o-transition: -o-transform 0.8s ease;
transition: transform 0.8s ease; /* appel de la transition à l'état initial */
}
La transition est déclanchée sur l'effet de survol de l'image, il suffit de modifier la valeur de la propriété initiale :
footer img:hover {
-webkit-transform: translate(0, -20px);
-moz-transform: translate(0, -20px);
-ms-transform: translate(0, -20px);
-o-transform: translate(0, -20px);
transform: translate(0, -20px); /* déclanchement de la transition au survol */
}
Conclusion
Ne nous leurrons pas : à l'heure actuelle, un certain nombre de dispositions doivent être prises avant d'intégrer les fonctionnalités nouvelles proposées sur cette page.
Si vous n'aviez à retenir que l'essentiel, ce serait :
-
HTML5, même à l'état de brouillon, est déjà parfaitement utilisable en production (avec une astuce pour IE), sous réserve d'éviter les balises encore "conflictuelles" telles que
<canvas>,<audio>et<video>. - Les effets CSS3 nécessitent tous (et pour un certain temps encore) de prendre en compte le "cas Internet Explorer". Des alternatives existent en JavaScript, mais à un moment il faut faire un choix car on ne pourra pas obtenir un équivalent "au pixel près".
Bonus : message d'avertissement pour IE6
Cette partie bonus ne fera pas plaisir à tout le monde, notamment certains modérateurs, mais s'il est un combat que je tiens à mener c'est celui de tout faire pour prévenir les internautes qu'Internet Explorer 6 est une antiquité obsolète et, surtout, peu sécurisée.
Pour ce faire, j'ai pour habitude d'afficher un bandeau contenant message d'avertissement en haut de mes sites web. A l'aide d'un commentaire conditionnel réservé à IE6, vous pouvez très facilement cibler ce navigateur et lui adresser un code HTML dédié :
<!--[if lte IE 6]>
<div class="alert-ie6">
Ici votre message d'avertissement pour IE6 le préhistorique
</div>
<![endif]-->
N'hésitez pas à consulter le code source HTML de Goetter.fr pour vous inspirer du message d'avertissement proposé.