/image%2F0011258%2F201307%2Fob_06c393213d1364cc674717ab41ca870b_01-7-13-004.jpg "présentations animations CSS3")
présentations animations CSS3
Sans vouloir influencer qui que ce soit, je conseille à celles et ceux qui ne voient pas les animations sur mon blog ou sur d'autres sites, d'utiliser un navigateur autre que Internet Explorer, qui n'est plus adapté pour ce genre de lecture.
Vous pouvez vérifier la compatibilité de votre navigateur en survolant ce texte: il devrait s'agrandir si votre navigateur sait le lire.
Avoir plusieurs navigateurs sur son PC ne bloque rien et prend simplement de la place sur votre disque.
Sachez également que l'effacement automatique de l'historique est possible sur le navigateur Internet Explorer; si vous utilisez un autre navigateur, vous pouvez opter pour un nettoyage automatique par CCleaner, par exemple !
La technique nous permet des présentations sympathiques; il serait dommage de s'en priver en ne choisissant pas le bon logiciel de navigation bien qu'ils soient tous en train de s'adapter!
J'ai donc essayé, aidé par le site ICI, dont j'ai recopié le code et qui a
fonctionné.
Depuis, je cherche à en comprendre un peu plus en découvrant quelques possibilités.
J'espère que cet article sera visible par tous, pas comme mes montages avec vignettes sur photo de fond
!
Version à peine modifiée du code du site indiqué ci-dessus.
Survolez l'image et conservez le curseur dessus car l'animation s'arrête dès que le curseur n'est plus dessus.
Première image:Translation vers le droite et vers le bas, agrandissement, rotation et variation de l'opacité.
Seconde image: Translation vers la droite, agrandissement et variation opacité.
Troisième image: agrandissement lent sur place...
le premier code "firefox": <style><!--
.animated {
opacity:.5;
-webkit-transition: -webkit-transform 2000ms ease-out 40ms, opacity 2000ms ease-out 40ms;
-moz-transition: -moz-transform 2000ms ease-out 40ms, opacity 2000ms ease-out 40ms;
}
.animated:hover {
opacity:1;
-webkit-transform: translate(150px, 100px) scale(1.5) rotate(360deg);
-moz-transform: translate(150px, 100px) scale(1.5) rotate(360deg);
--></style>
<p>
<img class="animated" src="http://blog.cyril.me/wp-content/uploads/2010/09/firefox-150x150.png" /></p>
Code de la cheminée: agrandissement et translation (scale et translate)
<style type="text/css"><!--
.imated {
opacity:.5;
-webkit-transition: -webkit-transform 2000ms ease-out 40ms, opacity 2000ms ease-out 40ms;
-moz-transition: -moz-transform 2000ms ease-out 40ms, opacity 2000ms ease-out 40ms;
}
.imated:hover {
opacity:1;
-webkit-transform: translate(300px, 100px) scale(3) ;
-moz-transform: translate(300px, 100px) scale(3);
--></style>
<p>
<img class="imated" src="http://thechive.files.wordpress.com/2011/12/fireplace2.gif" style="width: 150px;" />
</p>
Code de l'illumination: agrandissement seul (scale:échelle)
<style><!--
.ani {
-webkit-transition: -webkit-transform 4000ms ease-out 40ms;
-moz-transition: -moz-transform 4000ms ease-out 40ms;
}
.ani:hover {
-webkit-transform: scale(2) ;
-moz-transform: scale(2);
--></style>
<p>
<img class="ani" src="http://thechive.files.wordpress.com/2011/12/31.gif" style="width: 250px; margin: 10px 0px 0px 200px;" /></p>