web-dev-qa-db-fra.com

Plusieurs animations d'images clés CSS utilisant la propriété de transformation ne fonctionnent pas

En travaillant avec Animations d'images clés CSS J'ai découvert que lorsque je donnais à un élément deux animations comme:

.element {
    animation: animate1 1000ms linear infinite,
               animate2 3000ms linear infinite;
}

Si les deux animations s'animent à l'aide de la propriété transform, seule la dernière se déclenche en cascade. Mais si le @keyframes les animations sont disons un margin ou display ou un autre attribut css et l'autre utilise transform puis ils se déclenchent tous les deux.

voici un exemple de codepen avec le code correspondant ci-dessous.

[~ # ~] css [~ # ~] 

@keyframes move {
    0%, 100% { transform: translateX(0px); }
    50% { transform: translateX(50px); }
}
@keyframes skew {
    0%, 100% { transform: skewX(0deg); }
    50% { transform: skewX(15deg); }
}
@keyframes opacity {
    0%, 100% { opacity: 1; }
    50% { opacity: .25; }
}

.taco {
    animation: skew 2000ms linear infinite,
               opacity 4000ms linear infinite;
}

Dans ce qui précède, ils déclenchent tous les deux 

.burger {
    animation: skew 2000ms linear infinite,
               move 4000ms linear infinite;
}

Dans ce qui précède, seuls les derniers déclencheurs (en cascade) - pourquoi?

Quelqu'un a-t-il une solution pour cela sans utiliser js? Ou est-ce quelque chose qui ne fonctionne tout simplement pas? L'exemple est assez simple et je sais que je pouvais combiner les animations en une seule et ne pas avoir à déclarer les deux mais c'était un test pour une animation plus complexe sur laquelle je travaillais.

merci

csscss3css-animations
22
Danferth

Vous ne pouvez pas animer le même attribut (ici transformer l'attribut) plus d'une fois, sur un même élément, le dernier en remplacera un autre,

Vous devez placer votre élément cible dans un div et appliquer une animation de transformation sur le div et une autre animation de transformation sur l'élément cible ....

.div_class
{
    animation:animate1 1000ms linear infinite;
}

.element
{     
   animation:animate2 3000ms linear infinite;
}
31
Swarnendu Paul

Pour la même raison que

transform: skewX(45deg);
transform: translateX(4em);

ne biaisera pas l'élément mais le déplacera seulement. Et si vous voulez à la fois incliner et le déplacer, vous devez les enchaîner transform: skewX(45deg) translateX(4em)

Vous devrez faire quelque chose comme

@keyframes t {
    25% { transform: skewX(15deg); }
    50% { transform: skewX(0deg) translateX(50px); }
    75% { transform: skewX(15deg); }
}

Vous n'avez pas besoin de spécifier explicitement les images clés 0% Et 100% - elles seront générées automatiquement - voir la spécification CSS Animations .

Et puis vous pouvez utiliser

animation: t 4000ms linear infinite,
        opacity 4000ms linear infinite;

Encore une chose à laquelle vous devez faire attention: skewX(angleValue) translateX(lengthValue) arrive pour être identique à translateX(lengthValue) skewX(angleValue). Cependant, la plupart du temps, l'ordre dans lequel vous appliquez transforme les choses . Vous obtiendrez des résultats différents pour skewX(angleValue) translateY(lengthValue) et translateY(lengthValue) skewX(angleValue).

7
Ana

@ Jsfiddle de StephanMuller est à peu près la réponse, cette syntaxe a fonctionné pour moi http://jsfiddle.net/j83m5ha5/4

div {
background:green;
width:100px;
height:100px;
-webkit-animation: in 2s 200ms  forwards, out 1s 2200ms forwards;
}

Je crois que l'OP a posé la question à portée de main parce qu'il voulait standardiser ses animations et les appliquer au besoin, prenez ce code de pratique récent de mes cours: https://jsfiddle.net/kgLc56w4/

#b15{
top:200px;
left:200px;
background:#ff3399;
-webkit-animation: r4 ease-in-out 2s forwards 24s, s4 ease-in-out 2s forwards 30s;
}

Chaque bloc ne se déplace que dans une seule direction, donc au lieu de faire le travail de grognement de faire 15 animations, j'ai juste utilisé plus simple 8. Je sais que cela aurait pu être fait beaucoup plus simple, mais ce n'était pas le but de la pratique.

Ce que j'ai changé cependant, j'ai utilisé la syntaxe de Stephan sur le dernier 15e élément pour le déplacer une fois de plus et cela fonctionne.

Il vous suffit de faire attention au timing, dans le cas de Stephen, si vous augmentez la durée de la 1ère (entrée) animation, vous devez augmenter le retard de la 2ème (sortie).

Exemple:

-webkit-animation: in 20s 200ms  forwards, out 1s 20200ms forwards;

J'espère que cela aide!

0
Ivan Dončević