Forum d'entraide PHPFrance

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;}
}

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

@+

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 !?!

Tu as essayé en supprimant simplement le préfixe propriétaire ?

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 ...

merciiiii

Forum d'entraide PHPFrance

[RESOLU] HTML5 - Slide auto avec Keyframe

HTML5 - Slide auto avec Keyframe

Re: HTML5 - Slide auto avec Keyframe

Re: HTML5 - Slide auto avec Keyframe

Re: HTML5 - Slide auto avec Keyframe

Re: HTML5 - Slide auto avec Keyframe