apparition séquencée
Pour m'amuser et tester...les nouvelles possibiités qui nous sont offertes (juste sur Mozilla dans mon montage: la flemme de recopier les codes webkit...) et nous permettent de réaliser ce genre
de montage, proche d'un diaporama: une image s'efface pendant que l'autre apparait; elles sont décalées les unes par rapport aux autres et on peut imaginer d'autres positionnements, bien
entendu.
Le principe du code est celui que j'utilise depuis quelques jours:Le voici pour une image; les autres ont d'autres noms, d'autres
"keyframes" (paramètres personnels) et des positionnements de l'image différents sinon,
le code est le même.
<style type="text/css"><!--
p.exea {
-moz-animation: 16s myfirst infinite normal;
-moz-transition: -moz-transform 3s ease-in-out, opacity 3s ease-in-out;
-webkit-animation: 16s myfirst infinite normal;
-webkit-transition: -webkit-transform 3s ease-in-out, opacity 3s ease-in-out;
}
@-moz-keyframes myfirst /* Firefox */
{
0% {opacity:0}
33% {opacity:1}
66% {opacity:0}
100% {opacity:0}
}
@-webkit-keyframes myfirst /* Chrome.Safari */
{
0% {opacity:0}
33% {opacity:1}
66% {opacity:0}
100% {opacity:0}
}
--></style>
<p> </p>
<p class="exea" style="margin: 0px 0px 0px 0px;"><img src="http://www.terragalleria.com/images/canada/cabc10865.jpeg" width="300px" /></p>