Zastosuj styl po animacji CSS bez JS

Question

Mam przykuty animacji CSS, który jest przeważnie działa bez zarzutu:

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

Chodzi o to, po pierwsze animacja (product_across) skończył, chcę zastosować styl. Nie animuj go, po prostu go zastosuj.

Czy CSS3 pozwala na to? Domyślam się, że szukam czegoś w rodzaju "na końcu animacji".

Na razie jestem coraz wokół niego z:

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

... gdzie rotacja jest styl pragnę zastosowania. Ustawiając stany from/to na tę samą wartość dla tej właściwości, skutecznie robi to, co chcę, ale nie mogę powstrzymać się od myślenia, że ​​musi istnieć lepszy sposób.

Answer 1

Trzeba użyć animation-fill-mode:forwards jak sugeruje Fabio, ale to działa tylko na właściwościach określonych w animacji. Aby ustawić właściwości inne niż te, które chcesz faktycznie animowanych, trzeba zrobić im część animacji, dodając je do samego końca tak:

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

na przykład:

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

Ponieważ różnica między dwoma końcowymi klatkami kluczowymi jest naprawdę mała, przeskoczą one do nowych stylów bez względu na to, jaka jest animation-duration.

Demo

Drugi, bardziej powszechne, sposobem na uzyskanie tego efektu jest użycie JavaScript na animation-end

Answer 2

Tak, musisz użyć Animation Fill Mode.

Wystarczy określić ten styl jako ostatniej klatki kluczowej, a następnie dodać do tego #product

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

Answer 3

Na Firefox nieruchomość z !important zastąpi właściwość wcześniej ustawiony z @keyframe:

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

Niestety to się nie uda w Chrome i Edge.