Quiero crear una animación en la que mi imagen de un auto este sobre un paisaje y que el paisaje pase rápidamente (simulando el recorrido del auto) ademas desearía ver que las ruedas de mi auto giraran mientras dure la animación simulando su avance por el paisaje.
<div class="carro"></div>
CSS:
*{
padding: 0;
margin: 0;
}
/*inserto la imagen y le doy un tamaño aceptable*/
body{
background-image: url(paisaje.jpg);
background-size: 1500px;
/*en este bloque defino la animación del background (el paisaje)*/
background-repeat:no-repeat;
-webkit-animation-name:fondo;
-webkit-animation-duration:0.5s;
-webkit-animation-timing-function:ease;
-webkit-animation-delay:1s;
-webkit-animation-iteration-count:infinite;
}
/*acá simplemente inserto y defino la ubicación de la imagen del auto*/
.carro{
background-image: url(ferrari.jpg);
position: relative;
width: 300px;
height: 150px;
top: 532px;
}
/*en este bloque utilizo los keyframes para hacer que el paisaje (background) haga su animacion de movimiento*/
@-webkit-keyframes fondo{
0%{
background-position: left top;
}
100%{
background-position: right top;
}
}
Justo ahora con ese código solo logro que el paisaje haga su animación (aunque no se ve muy fluido) y desconozco como hacer la animación de las ruedas para que se vean girando, por cierto ¿puedo quitar el color de fondo que trae una imagen descargada con alguna propiedad de css para que en este caso solo se visualice el auto y no su fondo de imagen?