Применить стиль после CSS анимации без JS

Question

У меня есть прикован CSS анимации, которая в основном работает отлично:

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

Дело в том, после того, как первая анимация (product_across) закончил, я хочу, чтобы применить стиль. Не анимируйте его, просто примените его.

Подходит ли CSS3 для этого? Наверное, я искал своего рода свойство «на анимацию» или что-то в этом роде.

На данный момент я получаю вокруг него с:

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

... где вращение стиль, который я хотел бы применить. Установив состояния from/to на то же значение для этого свойства, оно эффективно делает то, что я хочу, но я не могу не думать, что должен быть лучший способ.

Answer 1

Вам нужно использовать animation-fill-mode:forwards как предполагает Фабио, но это работает только для свойств, заданных в анимации. Для того, чтобы установить свойства , кроме тех, которые вы хотите на самом деле анимированные, вы должны сделать их частью анимации, добавив их до самого конца так:

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

, например:

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

Имея разницу между двумя ключевыми кадрами конца, как очень маленькими, он будет переходить к новым стилям независимо от того, что такое animation-duration.

Demo

Другой, более распространенный, способ получить этот эффект использовать в JavaScript animation-end

Answer 2

Да, вам необходимо использовать Animation Fill Mode.

Просто определить этот стиль в качестве последнего ключевого кадра, а затем добавить это #product

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

Answer 3

В Firefox это свойство с !important переопределяет свойство ранее установленного с @keyframe:

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

К сожалению, это не удается для Chrome и Edge.