CSS transform实现div滑动入场时出现横向滚动条问题求助

1. 元素偏移超出视口范围：introbox-three本身设置了margin-left: 30% + width:70%，正常流状态下刚好铺满整个视口宽度。动画初始状态的transform: translateX(100%)是相对于元素自身宽度计算的，也就是会额外向右偏移70%视口宽度，整体元素跑到了视口右侧外70%的位置，浏览器默认会将超出视口的区域计入可滚动内容范围，因此触发横向滚动条。动画过程中元素逐渐回到原位置，超出视口的宽度不断减小，所以滚动条宽度会随之变化。
2. 盒模型计算偏差：默认盒模型下width属性不包含border和padding，你给div设置的边框和内边距会让实际渲染宽度比你设定的70%/60%多2px边框+20px内边距，进一步放大了溢出问题。

用transform实现滑入动画是非常合理的方案：transform属于CSS合成属性，动画过程中只会触发图层合成，不会触发重排（回流）和重绘，性能远高于修改left/right/margin等属性的实现方式，是当前前端做位移动画的首选方案，本身的技术选型没有问题。

只需要做两处简单修改即可解决问题：

• 给body添加overflow-x: hidden，直接裁剪掉横向超出视口的内容，从根源上避免滚动条出现
• 全局设置box-sizing: border-box，统一盒模型计算规则，避免边框内边距撑宽元素的问题

修改后的完整代码如下：

CSS代码 #

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  overflow-x: hidden;
}

.introbox-one {
  width: 70%;
  height: 15px;
  border: 1px solid blue;
  padding: 10px;
  background-color: blue;
  animation: introbox-one 1s ease-in;
}

@keyframes introbox-one {
  0% {
    transform: translateX(-100%);
  }
}

.introbox-two {
  margin-top: 20px;
  width: 60%;
  height: 15px;
  border: 1px solid blue;
  padding: 10px;
  background-color: blue;
  animation: introbox-two 1s ease-in;
}

@keyframes introbox-two {
  0% {
    transform: translateX(-100%);
  }
}

.introbox-three {
  margin-top: 20px;
  margin-left: 30%;
  width: 70%;
  height: 15px;
  border: 1px solid blue;
  padding: 10px;
  background-color: blue;
  animation: introbox-three 1s ease-in;
}

@keyframes introbox-three {
  0% {
    transform: translateX(100%);
  }
}

HTML代码 #

和原有逻辑一致，无需修改。

内容的提问来源于stack exchange，提问作者Oliver Yaron