CSS动画问题：图片移出屏幕导致页面回到顶部

嘿，我来帮你搞定这个烦人的移动端滚动问题！你遇到的情况其实是点赞动画里的left属性改变了元素的布局位置，触发了浏览器的异常滚动行为，而点踩动画用的right刚好不会触发这个问题。

问题根源分析 #

你的点赞动画（yes）最后一帧用了left: 400px，如果这个图片元素是相对定位的，设置left正值会让元素向右移动，同时会撑开父容器的宽度，导致页面出现横向滚动区域。移动端浏览器在处理这种布局突变时，会自动调整纵向滚动位置回到顶部——这就是你每次点赞后要重新滚动的原因。而点踩动画用的right: 400px是让元素向左移动，不会撑开容器宽度，所以完全正常。

修复方案 #

把点赞动画里的left属性替换成transform: translateX()就好啦！transform只是视觉上的移动，不会改变元素在文档流中的位置，也就不会触发浏览器的滚动调整。修改后的CSS代码如下：

@keyframes yes {
  0% { 
    transform: scale(1) rotateZ(0deg) translateX(0); 
  }
  30% { 
    transform: scale(1.05) rotateZ(0deg) translateX(0); 
  }
  100% { 
    transform: rotateZ(45deg) translateX(400px); 
  }
}
.animateYes { 
  animation-fill-mode: both; 
  animation: yes 0.6s linear; 
}
.animateYes:before { 
  transform: rotateZ(-35deg); 
  background: url(https://i.imgur.com/Zkwj970.png) no-repeat center 10px; 
}

/* 点踩动画也统一用transform更规范，避免后续出问题 */
@keyframes no { 
  0% { transform: rotateZ(360deg) translateX(0); } 
  30% { transform: scale(1.05) rotateZ(360deg) translateX(0); } 
  100% { transform: rotateZ(315deg) translateX(-400px); } 
}
.animateNo { 
  animation-fill-mode: both; 
  animation: no 0.6s linear; 
}
.animateNo:before { 
  transform: rotateZ(35deg); 
  background: url(https://i.imgur.com/XqQZ4KR.png) no-repeat center 10px; 
}

我把两个动画里的left/right都换成了translateX，这样两个动画的行为更一致，而且transform动画的性能也更好（浏览器会用GPU加速），能避免很多奇怪的排版问题。

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