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组合键并选择mobile view），你可以在这里看到到底发生了什么。蓝色边距是屏幕的默认大小。在这个动画屏幕调整到黄色边距的大小（我不想要它）并保持不变。但当我调整整个页面的大小（绿色箭头）时，它会自动刷新，然后问题就会消失（所有内容都会调整回蓝色边框的大小）。我的问题是如何避免这种情况？ 我使用jquery将此动画添加到我的对象中（单击另一个按钮后）：

---

我从编程开始，所以请耐心等待。对不起，有英语错误。

你能粘贴你的#buttonnext CSS代码吗？#buttonnext{显示：无；右：5%；位置：绝对；高度：45%；宽度：30%；顶部：55%；左：70%；背景色：#525252；颜色：白色；边框：5px纯白；边框半径：20px 20px 20px 20px 20px；字体大小：7vw；字体系列：Digital；字体变体：小大写；文本阴影：0 0 20px#000；z索引：3；}我很乐意提供帮助，但除非你为你的问题创建一个解决方案，在那里我可以体验你的错误并检查相关元素的代码，否则我一无所知。你能创建一个小提琴或使用snippet工具添加到上面的示例中吗？（使用

按钮构建代码片段）.我已经在jsfiddle.net上创建了一个fiddle，但是那里的一切都很完美。所以发送给你这个没有意义。你能粘贴你的#buttonnext CSS代码吗？#buttonnext{显示：无；右：5%；位置：绝对；高度：45%；宽度：30%；顶部：55%；左：70%；背景色：#525252；颜色：白色；边框：5px纯白；边框半径：20px 20px 20px 20px 20px；字体大小：7vw；字体系列：Digital；字体变体：小大写；文本阴影：0 0 20px#000；z索引：3；}我很乐意提供帮助，但除非你为你的问题创建一个解决方案，在那里我可以体验你的错误并检查相关元素的代码，否则我一无所知。你能创建一个小提琴或使用snippet工具添加到上面的示例中吗？（使用

按钮构建代码片段）.我已经在jsfiddle.net上创建了一个提琴，但是在那里一切都很完美。所以发送给你这个没有意义。

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