CSS: animación de auto con sus ruedas y paisaje animados

publicado por: Anonymous

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?

solución

antes que nada para realizar las animaciones que quieres deberás separar cada elemento a animar en una imagen diferente, por ejemplo, cada rueda, el coche, el paisaje todo en imágenes distintas.

Por otro lado, no, no puedes quitar el fondo de una imagen con CSS, debes de hacerlo con alguna herramienta de diseño gráfico y exportar la imagen en PNG transparente, luego debes crear una animación diferente para cada una de las partes (@keyframes).

Por ejemplo para tus ruedas usas transform: rotate(360deg), para el cuerpo del coche usas transform: translate, para el paisaje lo mismo.

La pregunta que realizas no es una pregunta específica y las animaciones complejas de css no son un tema fácil de explicar.

Por otra parte, te dejo algunos links donde podrás entender más sobre el tema:

Algunos conceptos de animación http://www.tutorialesprogramacionya.com/cssya/css3ya/detalleconcepto.php?cod=115

Cómo optimizar animaciones CSS con el uso de “WILL-CHANGE” https://developers.google.com/web/fundamentals/design-and-ux/animations/animations-and-performance?hl=es

Un saludo y buena práctica!

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *