2

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?

4
  • 1
    Hola Sasori1264, tal ves podrías incluir un ejemplo mínimo verificable?
    – user22721
    Commented el 3 may. 2018 a las 2:28
  • Hola, veo complicado hacer esa clase de animación con css y para una imagen sin fondo es mejor quitarlo previamente con una herramienta (como paint) a tratarlo de resolver con css. Commented el 3 may. 2018 a las 3:00
  • 5
    Fijate este ejemplo, a ver si te sirve, tendras que reemplazar la ciudad por un paisaje. codepen.io/slyka85/pen/vLwboX
    – Oren Diaz
    Commented el 3 may. 2018 a las 3:29
  • 1
    El tema de hacer girar las ruedas del coche, si esas ruedas forman parte de una imagen prediseñada.... no creo que puedas utilizando css3, tendrías que separar los elementos de la imagen (recortarlos y guardarlos como imágenes distintas, y al crear el coche maquetarlo para que todo quede bien encajado) y ya sí podrías, pero como una sola imagen no :( Commented el 25 may. 2018 a las 9:25

2 respuestas 2

3

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!

2
+25

Es tan sencillo como esto, pero tendrás que separar las ruedas y colocarlas en su lugar como te han comentado:

@keyframes rueda{
  0%{
    transform:rotate(0deg)
  }
  100%{
    transform:rotate(360deg)
  }
}

Respecto a la otra pregunta la respuesta corta es que no es posible. Puedes recortarlo con un clip-path o jugar con los modos de fusión, pero no puedes hacer una especie de croma con css.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.