hola como estan quiero hacer un scroll de imagenes con css3 parecido a este
http://jsfiddle.net/chriscoyier/Hyg3C/20/
la diferencia es que este es solo una imagen de fondo en el div y el mio son varias imagenes.
El problema que tengo es que cuando termina la ultima imagen queda un gran espacio en blanco y luego se resetea bruscamente y lo que yo quiero es que la primer imagen aparezca pega a la ultima
este es el codigo que uso
gracias
css
Código PHP:
.imghoroscopo { max-width: 60px; padding: 0 30px 0 30px;}
#tech-slideshow {
height: 100px;
position: relative;
overflow: hidden;
}
#tech-slideshow > div {
height: 100px;
width: 1526px;
position: absolute;
top: 0;
left: 0;
height: 100%;
-moz-transition: opacity 0.5s ease-out;
-o-transition: opacity 0.5s ease-out;
-webkit-transition: opacity 0.5s ease-out;
-ms-transition: opacity 0.5s ease-out;
-webkit-animation: moveSlideshow 60s linear infinite;
-moz-animation: moveSlideshow 60s linear infinite;
}
@-webkit-keyframes moveSlideshow {
0% { left: 0; }
100% { left: -1684px; }
}
@-moz-keyframes moveSlideshow {
0% { left: 0; }
100% { left: -1684px; }
}
html
Código PHP:
<div id="tech-slideshow">
<div id="tech-slideshow-1">
<img src="wp-content/themes/brownaldia/img/01.jpg" class="imghoroscopo">
<img src="wp-content/themes/brownaldia/img/02.jpg" class="imghoroscopo">
<img src="wp-content/themes/brownaldia/img/03.jpg" class="imghoroscopo">
<img src="wp-content/themes/brownaldia/img/04.jpg" class="imghoroscopo">
<img src="wp-content/themes/brownaldia/img/05.jpg" class="imghoroscopo">
<img src="wp-content/themes/brownaldia/img/06.jpg" class="imghoroscopo">
<img src="wp-content/themes/brownaldia/img/07.jpg" class="imghoroscopo">
<img src="wp-content/themes/brownaldia/img/08.jpg" class="imghoroscopo">
<img src="wp-content/themes/brownaldia/img/09.jpg" class="imghoroscopo">
<img src="wp-content/themes/brownaldia/img/10.jpg" class="imghoroscopo">
<img src="wp-content/themes/brownaldia/img/11.jpg" class="imghoroscopo">
<img src="wp-content/themes/brownaldia/img/12.jpg" class="imghoroscopo">
</div>
</div>