-webkit-animation-fill-mode в safari

Question

Я использую ключевые кадры для масштабирования элемента на моей веб-странице. Проблема в том, что анимация отлично работает в хроме, но не работает в сафари. Я предоставляю значения в 0%, 80% и 100% в ключевых кадрах, и каждый раз, когда анимация заканчивается, она возвращается к свойствам, определенным на уровне 80%, а не 100%. Я также использовал режим заполнения, чтобы остановить анимацию на последнем кадре, но не получил никакого решения.

@-webkit-keyframes leftpageanim { 
0%{ -webkit-transform:scale(1); 
bottom:-26px; 
} 

80%{ 
-webkit-transform:scale(1.8) ; bottom:140px; 
} 

100% 
{ 
-webkit-transform:scale(1.7); bottom:120px; } 
} 

после завершения анимации его снова возвращаясь назад к свойствам 80%

Answer 1

Я сделал некоторые изменения в коде. Посмотрите на это jsfiddle. Теперь анимация останавливается на 100%. Это то, что вы хотели, не так ли?

от:

.animator { 
    -webkit-animation-name: leftpageanim; 
    -webkit-animation-iteration-count: 1; 
    -webkit-animation-timing-function: linear; 
    -webkit-animation-duration: 5s; 

к:

.animator { 
    -webkit-animation: leftpageanim 5.0s ease-in-out forwards; 
    -webkit-animation-iteration-count: 1;