Jouez plusieurs animations CSS en même temps

120

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

  • L'image doit tourner et grandir en même temps.
  • La rotation effectuera un cycle toutes les 2 secondes.
  • La croissance fera un cycle 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.

css css-animations Don P
la source
L'image doit-elle être mise à l'échelle pendant qu'elle tourne? La réponse que j'ai fournie ne le fait pas, mais si c'est ce dont vous avez besoin, elle peut être modifiée pour le faire
Ram G Athreya

Réponses:

154

TL; DR

Avec une virgule, vous pouvez spécifier plusieurs animations, chacune avec ses propres propriétés, comme indiqué dans la réponse CriticalError ci-dessous.

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 à la même propriété transform

Comme alternative, vous pouvez envelopper l'image dans un <div>et animer chacun 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>
Développer l'extrait

rnrneverdies
la source
216

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

Exemple:

animation: rotate 1s, spin 3s;
Erreur critique
la source
3
Merci, c'est une solution beaucoup plus simple
Sergey Rotbart
12
Enfer ouais virgule!
Zachary Dahan
4
qu'en est-il des différents délais d'animation?
petit petit homme
@ little-tiny-man, vous pouvez également spécifier plusieurs animation-delayvia le coma, voir cette réponse
Klesun il y a
35

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 seule animation. La deuxième règle de style masque la première. Vous pouvez spécifier deux animations en utilisant une syntaxe comme celle-ci:

-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 ... Continuez 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 des éléments différents, l'image et un élément conteneur peut-être. Appliquez simplement l'une des animations au conteneur, comme dans ce violon: http://jsfiddle.net/rwaldin/fwk5bqt6/2/

Ray Waldin
la source
Merci d'avoir spécifié que nous pouvons faire plusieurs animations car nous séparons le nom par des virgules.
Zachary Dahan
3

Vous ne pouvez pas lire deux animations car l'attribut ne peut être défini qu'une seule fois. Au contraire, 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">
Développer l'extrait

Ram G Athreya
la source
2
l'utilisateur asekd pour "à des vitesses différentes"
rnrneverdies
C'est à des vitesses différentes que la rotation se produit en 2 secondes tandis que l'échelle se produit en 4 secondes car l'écriture de deux instructions d'animation ne fonctionne pas. J'ai pris soin de la synchronisation via des images clés.
Ram G Athreya
S'il est vrai que vous ne pouvez pas lire deux animations de transformation en même temps (car une transformation écraserait l'autre), il n'est pas correct de dire "Vous ne pouvez pas lire deux animations car l'attribut ne peut être défini qu'une seule fois". Voir la réponse acceptée sur l'utilisation de valeurs séparées par des virgules avec des animations.
Justin Taddei
2

tu peux essayer quelque chose comme ça

définir le parent sur rotateet l'image sur scaleafin que l' heure rotateet scalepuisse être différentes

Afficher l'extrait de code

Vitorino Fernandes
la source