在css中动画后调整大小的问题

Question

在显示按钮的动画后调整屏幕大小时出现问题。我在这个网站上有这个动画：https://daneden.github.io/animate.css/所以它不是我的。无论如何它看起来像这样：

.bounceInRight {
-webkit-animation-name: bounceInRight;
animation-name: bounceInRight;
}

@keyframes bounceInRight {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

from {
opacity: 0;
-webkit-transform: translate3d(3000px, 0, 0);
transform: translate3d(3000px, 0, 0);
}

60% {
opacity: 1;
-webkit-transform: translate3d(-25px, 0, 0);
transform: translate3d(-25px, 0, 0);
}

75% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}

90% {
-webkit-transform: translate3d(-5px, 0, 0);
transform: translate3d(-5px, 0, 0);
}

to {
-webkit-transform: none;
transform: none;
}
}

在PC上完美运行。但是在电话上（我正在使用phonegap制作一个混合应用程序）你可以滚动这个网站，因为这个移动的对象留下了一些空间。我在chrome中进行了模拟（按下组合 Ctrl + Shift + i 并选择移动视图）你可以在这里看到什么picture。蓝色边距是屏幕的默认大小。在此动画屏幕调整到黄色边距的大小（我不想要它）并保持这样。但是当我调整整个页面（绿色箭头）时，它会自动刷新，然后问题消失（所有内容都会重新调整为蓝色边距的大小）。我的问题是如何避免这种情况？ 我使用jquery（点击另一个按钮后）将此动画添加到我的对象中：

$("#anotherbutton").click(function() {
$("#buttonnext").addClass("animated slideInRight");
});

我从编程开始，请耐心等待。抱歉任何英语错误。