28112 sujets

CSS et mise en forme, CSS3

Animation d'images en CSS

Bonjour
J'aimerais créer une animations avec plusieurs images qui défilent de la gauche vers la droite.
Quand je met 2 images, ça passe, mais j'ai besoin de mettre plusieurs images et là ça bug, les autres images ne s'affichent/ne défilent pas. Aidez-moi svp ! Voici mon code html et css:

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Panorama</title>
<meta http-equiv="Content-Language" content="fr" />
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
</head>

<body>

<div id="cf3" class="shadow">
  <img class="bottom" src="img/bg_header_slider_00.jpg" alt="The Regional Natural Park of the Seine meanders" />
  <img class="top" src="img/bg_header_slider_01.jpg" alt="The Regional Natural Park of the Seine meanders" />
  <!-- <img class="top1" src="img/bg_header_slider_01.jpg" alt="The Regional Natural Park of the Seine meanders" />
  <img class="top1" src="img/bg_header_slider_01.jpg" alt="The Regional Natural Park of the Seine meanders" />
  <img class="top1" src="img/bg_header_slider_01.jpg" alt="The Regional Natural Park of the Seine meanders" /> -->
</div>

</body>
</html>


CSS:
#cf3 {
  position:relative;
  height:281px;
  width:450px;
  margin:0 auto;
}
#cf3 img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

#cf3 img.transparent {
opacity:0;
}

@keyframes cf3FadeInOut {
 0% {
 opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}

#cf3 img.top {
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 2s;
animation-direction: alternate;
}
Sujet clos
Aller à