Problême slideshow en CSS3

Bonjour,

J'ai suivi le Tuto: Un slideshow à défilement automatique mais ça ne fonctionne pas. Je n'arrive pas à trouver l'erreur. Je vous copie mes données si ça peut aider...
Je vous remercie par avance pour votre aide.

html:

<div id="slideshow">
    <ul id="sContent">
        <li><img src="islande1.jpg" alt="islande1" /></li><!--
        --><li><img src="islande2.jpg" alt="Islande2" /></li><!--
        --><li><img src="islande3.jpg" alt="Islande3" /></li>
    </ul>
</div>

CSS:

@-moz-keyframes Islande {
    
    0% {
        left: 0px; /*islande1*/
    }
    15% {
        left: 0px; /*idem pour attente*/
    }
    35% {
        left: -150px; /*islande2*/
    }
    50% {
        left: -150px; /*idem pour attente*/
    }
    70% {
        left: -300px; /*islande3*/
    }
    85% {
        left: -300px; /*idem pour attente*/
    }
    100% {
        left: 0px; /*islande1*/
    }
}
#slideshow {
    position: relative;
    width: 1500px;
    height: 1500px;
    margin:   20 px auto;
    overflow: hidden;
}

 #sContent li {
    display: inline;
}

ul#sContent {
    position: absolute;
    top: 0;
    left: 0;
    width: 4500px;
    margin: 0;            
    padding: 0;
    
    /*CSS3 keyframes animation*/
    animation-name: Islande;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

Modifié par 6l20 (29 Mar 2012 - 10:46)

Bonjour,
Rajoute le préfixe -moz- devant tes propriétés d'animation (animation-name, duration, etc.)
Modifié par Gothor (28 Mar 2012 - 10:08)

C'est bon, ça fonctionne.

Merci pour ta réponse.

Pardon j'ai une autre question, je ne sais pas si je peux la poser au même endroit...
mais est ce que c'est possible plutôt que de faire défiler les images vers la gauche, de les faire
apparaître l'une après l'autre comme sur ce site:
http://www.camillehenrot.fr/fr/work/60/sculptures-massees ?


Merci.

Bonjour,
Sûrement en créant plusieurs petites animations pour chaque objet.

Par exemple avec trois objets...

@-moz-keyframes animObjet1 {
    0%, 28%, 100% { opacity : 1; }
    33%, 95% { opacity : 0; }
}
@-moz-keyframes animObjet2 {
    33%, 62% { opacity : 1; }
    0%, 28%, 67%, 100% { opacity : 0; }
}
@-moz-keyframes animObjet3 {
    67%, 95% { opacity : 1; }
    0%, 62%, 100%  { opacity : 0; }
}

#objet1 { -moz-animation : animObjet1 10s infinite linear; }
#objet2 { -moz-animation : animObjet2 10s infinite linear; }
#objet3 { -moz-animation : animObjet3 10s infinite linear; }

(J'avoue, j'ai dû me dessiner sur papier les lignes de vie de chaque animation pour savoir...)
Et faire en sorte de superposer les objets...

J'arrive à obtenir quelque chose comme ça : http://jsfiddle.net/Gothor/tHfqY/1/
Modifié par Gothor (29 Mar 2012 - 10:46)

Bonjour,

OK merci je vais essayer dès que je peux...

Bonne journée.