Stil nach CSS-Animation ohne JS

Question

Ich habe eine verkettete CSS-Animation, die meistens funktioniert gut:

#product { 
    background: red; 
    width: 10%; 
    height: 10%; 
    border: none; 
    left: -22%; 
    top: 50%; 
    top: 40%; 
    animation: product_across 2s linear, product_down 1s; 
    animation-delay: 0s, 2s; 
} 
@-moz-keyframes product_across { 
    from { left: -22%; } 
    to { left: 98%; } 
} 
@-moz-keyframes product_down { 
    from { top: 40%; left: 98%; } 
    to { top: 98%; left: 128.5%; } 
} 

Die Sache ist, nachdem die erste Animation (product_across) beendet hat, möchte ich einen Stil anzuwenden. Nicht animieren, einfach anwenden.

Ermöglicht CSS3 dies? Ich denke, ich suche nach einer Art "on animation end" -Eigenschaft oder so etwas.

Im Moment bin ich Runde bekommen es mit:

@-moz-keyframes product_down { 
    from { -moz-transform: rotate(45deg); top: 40%; left: 98%; } 
    to { -moz-transform: rotate(45deg); top: 98%; left: 128.5%; } 
} 

... wo die Rotation ist der Stil, den ich anwenden möchten. Indem ich die from/to Zustände auf den gleichen Wert für diese Eigenschaft setze, tut es effektiv, was ich will, aber ich kann nicht helfen zu denken, dass es einen besseren Weg geben muss.

Answer 1

Sie #product brauchen animation-fill-mode:forwards zu verwenden, wie Fabio schon sagt, funktioniert aber nur für in der Animation auf Eigenschaften festlegen. Um die Eigenschaften andere als die, die einstellen wollen Sie eigentlich animiert, müssen Sie sie Teil der Animation machen, indem sie ganz am Ende wie so hinzufügen:

@keyframes { 
    /* ... Your original keyframes (except the last) ... */ 
    99.99% { /* ... The original properties of something you want to change ... */ } 
    100% { ... Your original end properties and the changed properties ... } 
} 

zum Beispiel:

@keyframes rotate { 
    0% { transform:rotate(0deg); } 
    99.999% { background:blue; } 
    100% { transform:rotate(360deg); background:red; } 
} 

Da der Unterschied zwischen den beiden End-Keyframes sehr klein ist, springt er zu den neuen Styles, egal, was die animation-duration ist.

Demo

Der andere, häufiger, Weg, um diese Wirkung zu erhalten, ist der verwenden Javascript animation-end

Answer 2

Ja, Sie müssen Animation Fill Mode verwenden.

einfach diesen Stil als letzte Keyframe definieren und diese dann fügen Sie

#product{-webkit-animation-fill-mode:forwards; animation-fill-mode:forwards;} 

Answer 3

Auf Firefox eine Eigenschaft mit !important der Eigenschaft zuvor eingestellte mit einem @keyframe außer Kraft setzen:

#product .newStyle { 
    top: 90% !important; 
    left: 120% !important; 
} 

Leider schlägt dies bei Chrome und Edge fehl.