[RESOLU] HTML5 - Slide auto avec Keyframe

par **lacfab** » 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 ...

merciiiii

par **@rthur** » 15 oct. 2016, 13:43

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

par **lacfab** » 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 !?!

par **moogli** » 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

@+

par **lacfab** » 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;}
}

[RESOLU] HTML5 - Slide auto avec Keyframe

Répondre

Étendre la vue Revue du sujet : [RESOLU] 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

HTML5 - Slide auto avec Keyframe