我正在尝试在用户滚动时为 translate(X, Y) 设置动画。我已经实现了所有的滚动功能，它看起来很糟糕，因为切换是瞬时的。
我似乎无法弄清楚如何为翻译设置动画。
加载时，我的容器具有值 -webkit-transform: translate(0%, 0%);，要转到第二张“幻灯片”，它将更改为 -webkit-transform: 翻译(0%, -100%);
我只是通过 jQuery 这样做:
$('.container').css({"transform":"translate(0%,-" + positionY + "%)"});
我想在这里复制动画:http://www.apple.com/uk/iphone-5s/
(注意:我稍后使用 translate(x, y) 来侧向移动。)
最佳答案
使用 CSS transition property以获得平滑的效果。
.container {
transition: transform 1s;
}
(您还需要供应商前缀来定位所有浏览器。)
另请参阅这篇 MDN 文章以获取更多示例和教程:https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions
关于html - 动画滚动滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21958082/