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

动画重置为初始状态是默认行为，要让您的动画呈现其最终状态，您可以将其 填充模式 设置为 forwards 像这样

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

CSS iOS 最后一帧的动画问题

CSS animation problem at last frame on iOS

html

css

css-transitions

css-animations