web-dev-qa-db-fra.com

Jouez plusieurs animations CSS en même temps

Comment puis-je faire jouer deux animations CSS à des vitesses différentes ?

  • L'image doit être en rotation et en croissance en même temps.
  • La rotation se répète toutes les 2 secondes.
  • La croissance se répète toutes les 4 secondes.

Exemple de code:

.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/ - une seule animation (la dernière déclarée) est lue.

csscss3css-animations
81
Don P

TL; DR

Avec une virgule, vous pouvez spécifier plusieurs animations, chacune avec ses propres propriétés.

Exemple: 

animation: rotate 1s, spin 3s;

Réponse originale

Il y a deux problèmes ici:

#1

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

La deuxième ligne remplace la première. Donc, n'a aucun effet.

# 2

Les deux images clés s'appliquent sur la même propriété transform

Comme alternative, vous pouvez envelopper l'image dans un <div> et l'animer séparément et à des vitesses différentes.

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>
107
rnrneverdies

Au cas où quelqu'un de nouveau viendrait attraper ce fil, vous pouvez spécifier plusieurs animations - chacune avec leurs propres propriétés - avec une virgule.

Exemple:

animation: rotate 1s, spin 3s;
189
Critical Error

Vous pouvez en effet exécuter plusieurs animations simultanément, mais votre exemple présente deux problèmes. Tout d'abord, la syntaxe que vous utilisez ne spécifie qu'une animation. La deuxième règle de style cache la première. Vous pouvez spécifier deux animations en utilisant la syntaxe suivante:

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

comme dans ce violon (où j'ai remplacé "scale" par "fade" en raison de l'autre problème expliqué ci-dessous ... Ours avec moi.): http://jsfiddle.net/rwaldin/fwk5bqt6/

Deuxièmement, vos deux animations modifient la même propriété CSS (transformation) du même élément DOM. Je ne crois pas que vous puissiez faire ça. Vous pouvez spécifier deux animations sur différents éléments, l’image et un élément conteneur, par exemple. Appliquez simplement une des animations au conteneur, comme dans ce violon: http://jsfiddle.net/rwaldin/fwk5bqt6/2/

33
Ray Waldin

vous pouvez essayer quelque chose comme ça

définir le parent sur rotate et l'image sur scale de sorte que le temps rotate et scale puisse être différent

div {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  -webkit-animation: spin 2s linear infinite;
}
.image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  -webkit-animation: scale 4s linear infinite;
}
@-webkit-keyframes spin {
  100% {
    transform: rotate(180deg);
  }
}
@-webkit-keyframes scale {
  100% {
    transform: scale(2);
  }
}
<div>
  <img class="image" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120" />
</div>
1
Vitorino fernandes

Vous ne pouvez pas jouer deux animations car l'attribut ne peut être défini qu'une seule fois. Pourquoi ne pas inclure la deuxième animation dans la première et ajuster les images clés pour obtenir le bon timing?

.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">
1
Ram G Athreya