Applicare stile dopo l'animazione CSS senza JS

Question

ho un'animazione CSS incatenato che è per lo più funziona bene:

#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%; } 
} 

Il fatto è che, dopo la prima animazione (product_across) ha finito, voglio applicare uno stile. Non animato, basta applicarlo.

CSS3 consente questo? Immagino che stia cercando una sorta di proprietà "on animation end", o qualcosa del genere.

Per il momento mi sto rotonda con:

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

... dove la rotazione è lo stile che desidero applicare. Impostando gli stati from/to sullo stesso valore per questa proprietà, effettivamente fa ciò che voglio, ma non posso fare a meno di pensare che ci deve essere un modo migliore.

Answer 1

Si ha bisogno di usare animation-fill-mode:forwards come suggerisce Fabio, ma questo funziona solo per le proprietà impostate nell'animazione. Per impostare le proprietà diverso da quelli che si desidera realmente animato, è necessario renderli parte dell'animazione aggiungendoli alla fine in questo modo:

@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 ... } 
} 

ad esempio:

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

Avendo la differenza tra i due fotogrammi chiave di fine come veramente piccoli, salterà ai nuovi stili, non importa quale sia lo animation-duration.

Demo

L'altra, più comune, modo per ottenere questo effetto è quello di utilizzare di Javascript animation-end

Answer 2

sì, è necessario utilizzare Animation Fill Mode.

definire semplicemente che lo stile come l'ultimo fotogramma chiave e poi si aggiunge questo al #product

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

Answer 3

Su Firefox una proprietà con !important sovrascriverà la proprietà precedentemente impostato con un @keyframe:

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

Sfortunatamente questo non funziona su Chrome e Edge.