CSS проблема анимации в последнем кадре на iOS

Question

Я использую анимацию, чтобы отразить элемент 2 раза влево. Пока все работает нормально, но на iOS конец анимации больше не плавный. Он переходит из состояния слева в нормальное положение. Без анимации. Я что-то пропустил?

Вот мой код:

@keyframes bounceright {
0% 		{-webkit-transform:translateX(0px); transform:translateX(0px);}
50%		{-webkit-transform:translateX(-20px); transform:translateX(-20px);}
100% 	{-webkit-transform:translateX(1px); transform:translateX(1px);}
}

.bounceright {
	-webkit-animation-name: bounceright;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 2;
	animation-name: bounceright;
	animation-duration: 1s;
	animation-iteration-count: 2;
    transition: all 300ms ease 0s;}

<div class="bounceright">
	<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, se </div>
</div>

Answer 1

Восстановление анимации до ее начального состояния является поведением по умолчанию, чтобы ваша анимация приняла конечное состояние, вы можете установить режим заполнения на вперед , например,

.bounceright {
    animation-fill-mode: forwards; /* Add this */
    -webkit-animation-name: bounceright;    
    -webkit-animation-duration: 1s;     
    -webkit-animation-iteration-count: 2;   
    animation-name: bounceright;    
    animation-duration: 1s;     
    animation-iteration-count: 2; 
    transition: all 300ms ease 0s;
}