Reproduza várias animações CSS ao mesmo tempo

118

Como posso fazer com que duas animações CSS sejam reproduzidas em velocidades diferentes ?

  • A imagem deve girar e crescer ao mesmo tempo.
  • A rotação será alternada a cada 2 segundos.
  • O crescimento terá um ciclo a cada 4 segundos.

Código de exemplo:

.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/ - apenas uma animação (a última declarada) é reproduzida.

Don P
fonte
A imagem deve ser redimensionada enquanto gira? A resposta que eu forneci não funciona, mas se é disso que você precisa, então ele pode ser ajustado para fazer isso
Ram G Athreya

Respostas:

154

TL; DR

Com uma vírgula, você pode especificar várias animações, cada uma com suas próprias propriedades, conforme indicado na resposta CriticalError abaixo.

Exemplo:

animation: rotate 1s, spin 3s;

Resposta original

Há duas questões aqui:

# 1

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

A segunda linha substitui a primeira. Então, não tem efeito.

# 2

Ambos os quadros-chave se aplicam à mesma propriedade transform

Como alternativa, você poderia envolver a imagem em um <div>e animar cada um separadamente e em velocidades diferentes.

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>

rnrneverdies
fonte
215

Caso alguém novo esteja chegando e pegando esse tópico, você pode especificar várias animações - cada uma com suas próprias propriedades - com uma vírgula.

Exemplo:

animation: rotate 1s, spin 3s;
Erro crítico
fonte
3
Obrigado, esta é uma solução muito mais simples
Sergey Rotbart,
12
Inferno, sim, vírgula!
Zachary Dahan
3
e quanto aos atrasos de animação diferentes?
homenzinho minúsculo
35

Você realmente pode executar várias animações simultaneamente, mas seu exemplo tem dois problemas. Primeiro, a sintaxe que você usa especifica apenas uma animação. A segunda regra de estilo oculta a primeira. Você pode especificar duas animações usando uma sintaxe como esta:

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

como neste violino (onde substituí "escala" por "desvanecimento" devido ao outro problema explicado abaixo ... Fique comigo.): http://jsfiddle.net/rwaldin/fwk5bqt6/

Em segundo lugar, ambas as animações alteram a mesma propriedade CSS (transformação) do mesmo elemento DOM. Eu não acredito que você possa fazer isso. Você pode especificar duas animações em elementos diferentes, a imagem e um elemento de contêiner, talvez. Basta aplicar uma das animações ao contêiner, como neste violino: http://jsfiddle.net/rwaldin/fwk5bqt6/2/

Ray Waldin
fonte
Obrigado por especificar que podemos fazer várias animações, pois separamos o nome com vírgulas.
Zachary Dahan
3

Você não pode reproduzir duas animações, pois o atributo pode ser definido apenas uma vez. Em vez disso, por que você não inclui a segunda animação na primeira e ajusta os quadros-chave para obter o tempo certo?

.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">

Ram G Athreya
fonte
2
o usuário asekd por "em velocidades diferentes"
rnrneverdies
É em velocidades diferentes que a rotação acontece em 2 segundos, enquanto a escala acontece em 4 segundos, já que escrever duas instruções de animação não funciona. Eu cuidei do tempo por meio de quadros-chave.
Ram G Athreya de
Embora seja verdade que você não pode reproduzir duas animações de transformação ao mesmo tempo (porque uma transformação sobrescreveria a outra), não é correto dizer "Você não pode reproduzir duas animações, pois o atributo pode ser definido apenas uma vez." Veja a resposta aceita sobre o uso de valores separados por vírgula com animações.
Justin Taddei
2

você pode tentar algo assim

defina o pai como rotatee a imagem como scalepara que o tempo rotatee scalepossa ser diferente

Vitorino fernandes
fonte