[RESOLU] HTML5 - Slide auto avec Keyframe

Eléphant du PHP | 159 Messages

12 oct. 2016, 07:00

Hello,

Alors cette page fonctionne, je vous invite à tester ... mais !
Je suis sur Mac (peu importe on s'en fout) et cela fonctionne sur Safari, mais pas sur Firefox. Sauriez-vous pourquoi ?
(PS : il vous faut 8 images en 380 x 425 px)

Merci d'avance ;o)

index.html

Code : Tout sélectionner

<!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Slide auto avec keyframe</title> <link rel="stylesheet" href="css/slider.css" /> </head> <body> <div id="slider"> <div id="wrapper"> <ul id="slides"> <li><img src="images/accueil_1.jpg" class="slide" alt="" /></li> <li><img src="images/accueil_2.jpg" class="slide" alt="" /></li> <li><img src="images/accueil_3.jpg" class="slide" alt="" /></li> <li><img src="images/accueil_4.jpg" class="slide" alt="" /></li> <li><img src="images/accueil_5.jpg" class="slide" alt="" /></li> <li><img src="images/accueil_6.jpg" class="slide" alt="" /></li> <li><img src="images/accueil_7.jpg" class="slide" alt="" /></li> <li><img src="images/accueil_8.jpg" class="slide" alt="" /></li> </ul> </div> </div> </body> </html>

slider.css

Code : Tout sélectionner

@charset "UTF-8"; /* CSS Document */ ul { padding: 0; margin:0; list-style-type: none; } .slide{ width: 380px; height: 425px; float: left; } #wrapper { width: 380px; height: 425px; overflow: hidden; position: relative; } #slides { width: 3040px; position : absolute; top: 0; left: 0; -webkit-animation:sliderAuto 40s infinite; -moz-animation:sliderAuto 40s infinite; -o-animation:sliderAuto 40s infinite; animation:sliderAuto 40s infinite; } @-webkit-keyframes sliderAuto { 0%{left:0;} 8%{left:0;} 12%{left:-380px;} 20%{left:-380px;} 24%{left:-760px;} 32%{left:-760px;} 36%{left:-1140px;} 44%{left:-1140px;} 48%{left:-1520px;} 56%{left:-1520px;} 60%{left:-1900px;} 68%{left:-1900px;} 72%{left:-2280px;} 80%{left:-2280px;} 84%{left:-2660px;} 92%{left:-2660px;} 100%{left:0px;} }

Avatar de l’utilisateur
Modérateur PHPfrance
Modérateur PHPfrance | 8755 Messages

12 oct. 2016, 09:25

salut,

cela me semble normal tu utilises un préfixe vendeur pour ta propriété css d'animation
-webkit-keyframes

et bien sur safari utilise webkit en moteur de rendu (comme chrome) et firefox lui utilise gecko donc cela ne fonctionne pas. (même combat pour IE ou autre navigateur non webkit)

utilise la version standard à la place : keyframes
pour info : http://caniuse.com/#search=keyframes :)


@+
Il en faut peu pour être heureux ......

Eléphant du PHP | 159 Messages

13 oct. 2016, 23:05

Oui merci en effet en relisant ça parait logique.
Comment utiliser la version standard ?

J'ai mis :
@-webkit-keyframes sliderAuto {
BLA BLA
@-moz-keyframes sliderAuto {
BLA BLA
@-o-keyframes sliderAuto {
BLA BLA
mais pour la version standard je ne sais pas comment l'écrire !?!

Avatar de l’utilisateur
Administrateur PHPfrance
Administrateur PHPfrance | 7268 Messages

15 oct. 2016, 13:43

Tu as essayé en supprimant simplement le préfixe propriétaire ?
Quand tout le reste a échoué, lisez le mode d'emploi...

Eléphant du PHP | 159 Messages

15 oct. 2016, 14:59

en mettant
@-keyframes sliderAuto {
ça ne marche pas et la balise ne prend pas la même couleur que les autres dans mon éditeur, donc ce ne doit pas être une syntaxe correcte.

edit : à moins que ce soit @keyframes sliderAuto { ???
edit 2 : ah ben oui ... #-o merciiiii