apparition séquencée

, 17:48pm

Publié par Pourquoi pas 732

 

 

 

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>&nbsp;</p>
<p class="exea" style="margin: 0px 0px 0px 0px;"><img src="http://www.terragalleria.com/images/canada/cabc10865.jpeg" width="300px" /></p>