CSS3 Animate: как сделать так, чтобы объект не возвращался в исходное положение после запуска анимации? [дубликат]

На этот вопрос уже есть ответ здесь:

• Сохранение конечного состояния в конце анимации CSS3 4 ответа

Я пытаюсь выполнить простое преобразование в shape в 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;
}