CSS3 Анимация: как вернуть объект в исходное положение после запуска анимации?

Я пытаюсь просто преобразовать форму в CSS (webkit специально). Анимация выполняется так, как ожидалось, но по завершении div вернется в исходное состояние. Есть ли способ, чтобы он оставался в своем конечном состоянии?

Пока что мой CSS:

    @-webkit-keyframes rotate-good {
  from {
    -webkit-transform: rotate(0deg);
  }
  to { 
    -webkit-transform: rotate(-90deg);
  }
}

@-webkit-keyframes rotate-bad {
  from {
    -webkit-transform: rotate(0deg);
  }
  to { 
    -webkit-transform: rotate(90deg);
  }
}

#good-arrow 
{
    -webkit-animation-name:             rotate-good; 
    -webkit-animation-duration:         1s; 
    -webkit-animation-iteration-count:  1;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 2s;
}

#bad-arrow 
{
    -webkit-animation-name:             rotate-bad; 
    -webkit-animation-duration:         1s; 
    -webkit-animation-iteration-count:  1;
    -webkit-animation-timing-function: linear;    
    -webkit-animation-delay: 2s;
}

Ответ 1

О, это легко, просто установите все правила css на результат финиша. Пример

Ответ 2

Более быстрый способ сделать это - добавить:

-webkit-animation-fill-mode: вперед,

который сохраняет окончательное состояние ключевого кадра.

Ответ 3

кросс-браузерное решение:

-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;

Комментарии Мадара Учиха выше не всегда возможны по одной причине: представьте себе, что вместо запуска анимации сразу (анимация-задержка: 0 с) вам нужно 10 секунд задержки до ее начала. Если это так, вы увидите конечное состояние вашего анимированного элемента в течение 10 секунд, а затем анимация перенесет его на ключевой кадр 0 до 100 ключевых кадров, но всегда вы видите в течение 10 секунд конечное состояние.