Reproduce varias animaciones CSS al mismo tiempo


118

¿Cómo puedo hacer que dos animaciones CSS se reproduzcan a diferentes velocidades ?

  • La imagen debe girar y crecer al mismo tiempo.
  • La rotación tendrá un ciclo cada 2 segundos.
  • El crecimiento tendrá un ciclo cada 4 segundos.

Código de ejemplo:

.image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    -webkit-animation:spin 2s linear infinite;
    -webkit-animation:scale 4s linear infinite;
}

@-webkit-keyframes spin { 
    100% { 
        transform: rotate(180deg);
    } 
}

@-webkit-keyframes scale {
    100% {
         transform: scaleX(2) scaleY(2);
    }
}

http://jsfiddle.net/Ugc5g/3388/ : solo se reproduce una animación (la última declarada).


¿Debería escalar la imagen mientras gira? La respuesta que he proporcionado no es así, pero si eso es lo que necesita, puede modificarlo para que lo haga
Ram G Athreya

Respuestas:


154

TL; DR

Con una coma, puede especificar varias animaciones, cada una con sus propias propiedades, como se indica en la respuesta CriticalError a continuación.

Ejemplo:

animation: rotate 1s, spin 3s;

Respuesta original

Hay dos problemas aquí:

# 1

-webkit-animation:spin 2s linear infinite;
-webkit-animation:scale 4s linear infinite;

La segunda línea reemplaza a la primera. Entonces, no tiene ningún efecto.

# 2

Ambos fotogramas clave se aplican a la misma propiedad transform

Como alternativa, puede envolver la imagen en a <div>y animar cada una por separado y a diferentes velocidades.

http://jsfiddle.net/rnrlabs/x9cu53hp/

.scaler {
    position: absolute;
    top: 100%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    animation: scale 4s infinite linear;    
}

.spinner {
    position: relative;
    top: 150px;
    animation: spin 2s infinite linear;
}


@keyframes spin { 
    100% { 
        transform: rotate(180deg);
    } 
}

@keyframes scale {
    100% {
         transform: scaleX(2) scaleY(2);
    }
}
<div class="spinner">
<img class="scaler" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">
<div>


215

En caso de que llegue alguien nuevo y capte este hilo, puede especificar varias animaciones, cada una con sus propias propiedades, con una coma.

Ejemplo:

animation: rotate 1s, spin 3s;

3
Gracias, esta es una solución mucho más simple
Sergey Rotbart

12
¡Diablos, sí, coma!
Zachary Dahan

3
¿Qué pasa con los diferentes retrasos de animación?
pequeño hombrecito

35

De hecho, puede ejecutar varias animaciones simultáneamente, pero su ejemplo tiene dos problemas. Primero, la sintaxis que usa solo especifica una animación. La segunda regla de estilo oculta la primera. Puede especificar dos animaciones usando una sintaxis como esta:

-webkit-animation-name: spin, scale
-webkit-animation-duration: 2s, 4s

como en este violín (donde reemplacé "escala" con "desvanecimiento" debido al otro problema que se explica a continuación ... Tengan paciencia conmigo): http://jsfiddle.net/rwaldin/fwk5bqt6/

En segundo lugar, ambas animaciones alteran la misma propiedad CSS (transformación) del mismo elemento DOM. No creo que puedas hacer eso. Puede especificar dos animaciones en diferentes elementos, quizás la imagen y un elemento contenedor. Simplemente aplique una de las animaciones al contenedor, como en este violín: http://jsfiddle.net/rwaldin/fwk5bqt6/2/


Gracias por especificar que podemos hacer varias animaciones ya que separamos el nombre con comas.
Zachary Dahan

3

No puede reproducir dos animaciones ya que el atributo solo se puede definir una vez. Más bien, ¿por qué no incluye la segunda animación en la primera y ajusta los fotogramas clave para obtener la sincronización correcta?

.image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    -webkit-animation:spin-scale 4s linear infinite;
}

@-webkit-keyframes spin-scale { 
    50%{
        transform: rotate(360deg) scale(2);
    }
    100% { 
        transform: rotate(720deg) scale(1);
    } 
}
<img class="image" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">


2
el usuario asekd para "a diferentes velocidades"
rnrneverdies

Es a diferentes velocidades, la rotación ocurre en 2 segundos, mientras que la escala ocurre en 4 segundos, ya que escribir dos declaraciones de animación no funciona. Me he ocupado de la sincronización a través de fotogramas clave.
Ram G Athreya

Si bien es cierto que no puede reproducir dos animaciones de transformación al mismo tiempo (porque una transformación sobrescribirá a la otra), no es correcto decir "No puede reproducir dos animaciones ya que el atributo solo se puede definir una vez". Vea la respuesta aceptada sobre el uso de valores separados por comas con animaciones.
Justin Taddei

2

puedes probar algo como esto

establezca el padre en rotatey la imagen en scalepara que el rotatey el scaletiempo puedan ser diferentes

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.