Chained Animation verwandelt sie animiert nicht

Question

Während mit Animationen arbeiten, ich auf ein nicht dokumentiert und unerwartetes Verhalten kam:

Wenn Animationen Chaining-Transformation (jede Eigenschaft transformieren, und die einzige transform-Eigenschaft), wird die erste Animation hat das erwartete Verhalten beim Übergang vom Zustand A zum Zustand B, während der zweite ohne Übergang von B nach C geht.

div { 
 
    background:red; 
 
    width:100px; 
 
    height:100px; 
 
    -webkit-animation: in 2s, out 2s 3s forwards; 
 
    animation: in 2s, out 3s 2s forwards; 
 
} 
 
@keyframes in { 
 
    from { 
 
     transform: scale(0); 
 
    } 
 
    to { 
 
     transform: scale(1); 
 
    } 
 
} 
 
@keyframes out { 
 
    from { 
 
     transform: scale(1); 
 
    } 
 
    to { 
 
     transform: scale(.5); 
 
    } 
 
} 
 
@-webkit-keyframes in { 
 
    from { 
 
     -webkit-transform: scale(0); 
 
    } 
 
    to { 
 
     -webkit-transform: scale(1); 
 
    } 
 
} 
 
@-webkit-keyframes out { 
 
    from { 
 
     -webkit-transform: scale(1); 
 
     
 
    } 
 
    to { 
 
     -webkit-transform: scale(.5); 
 
    } 
 
}

<div></div>

ich in diesem speziellen Fall wissen, können die Dinge in einem einzigen Schritt durchgeführt werden, aber das ist nicht die Lösung, ich bin für

suchen Wie kann ich diese mit CSS lösen nur?

UPDATE: Alles scheint in Firefox gut zu funktionieren, könnte es ein Chrom Bug sein?

AKTUALISIERUNG 2: Dem Präfix freie Animation hinzugefügt, wie angefordert; Ändert nicht viel.

Answer 1

Dies ist ein weiterer Chrome Rendering-Bug.

Seltsamerweise scheint es ein Workaround zu sein, eine andere Eigenschaft hinzuzufügen, die keine Rolle spielt, um zu erkennen, dass eine Animation zu passieren scheint. In diesem Fall habe ich eine Zeile hinzugefügt, die den Hintergrund auf die into standardmäßig festgelegt. Dies muss nur für die -webkit- Keyframe-Animation durchgeführt werden.

Die tatsächliche Fehlerbehebung in Ihrem Projekt möglicherweise oder nicht erfordern, die Eigenschaft zu etwas anderem ändern/Hinzufügen von mehr Orten. Ich kann es nicht wissen, ohne mich selbst zu testen.

div { 
 
    background:red; 
 
    width:100px; 
 
    height:100px; 
 
    -webkit-animation: in 2s, out 2s 3s forwards; 
 
    animation: in 2s, out 3s 2s forwards; 
 
} 
 
@keyframes in { 
 
    from { 
 
     transform: scale(0); 
 
    } 
 
    to { 
 
     transform: scale(1); 
 
    } 
 
} 
 
@keyframes out { 
 
    from { 
 
     transform: scale(1); 
 
    } 
 
    to { 
 
     transform: scale(.5); 
 
    } 
 
} 
 
@-webkit-keyframes in { 
 
    from { 
 
     -webkit-transform: scale(0); 
 
    } 
 
    to { 
 
     -webkit-transform: scale(1); 
 
     background:red; 
 
    } 
 
} 
 
@-webkit-keyframes out { 
 
    from { 
 
     -webkit-transform: scale(1); 
 
     
 
    } 
 
    to { 
 
     -webkit-transform: scale(.5); 
 
    } 
 
}

<div></div>

Side Hinweise:

• Verwenden Semikolons - indem sie nicht so tun Sie machen alle Beteiligten das Leben ohne Grund härter.
• Verwenden gute Formatierung - aus demselben Grund wie oben
• Sie don't need to-moz- verwenden für animation oder transform (es ist kein-moz-transform)
• gebe ohne Präfix-Version von Eigenschaften nach den voran diejenigen - Sie wollen, dass sie Verwenden Sie die mehr Standard-Version, wann immer möglich - da CSS Kaskadierung bedeutet, dass es nachher platzieren, wird es auf die obigen Dinge zurückfallen.

Answer 2

Sehen Sie diese http://jsfiddle.net/khanamiryan/3p3x7v1f/2/

@-webkit-keyframes inout { 
    0% { 
     -webkit-transform: scale(0) 
    } 
    50% { 
     -webkit-transform: scale(1) 
    } 
    100% { 
     -webkit-transform: scale(.5) 
    } 
}