本地正常运行的HTML/CSS代码部署到GitHub后@keyframes文字抖动效果失效求助

我帮你排查下这个本地正常、GitHub Pages上动画不生效的问题，这种情况我碰到过好几次，大概率是这几个原因，你可以一步步排查：

1. 先检查CSS文件的引用路径 #

本地开发时的相对路径和GitHub Pages的线上路径可能不一样，这是最常见的问题：

• 如果你的HTML和CSS都在仓库根目录，本地用./style.css没问题，但如果是项目仓库（不是用户主页仓库），GitHub Pages的访问地址是你的用户名.github.io/仓库名/，这时候如果用绝对路径/style.css，会指向你的用户名.github.io/style.css，自然找不到文件。
• 解决办法：把HTML里的<link>标签的href改成相对路径，比如：

  <link rel="stylesheet" href="./style.css">
  

  或者带仓库名的绝对路径：

  <link rel="stylesheet" href="/webpage/style.css">
  

2. 强制清除缓存 #

有时候浏览器或GitHub的CDN会缓存旧的CSS文件，即使你修改了代码也不会更新：

• 用快捷键强制刷新页面（Windows：Ctrl+Shift+R；Mac：Cmd+Shift+R）
• 在CSS文件的引用后加版本号，比如：

  <link rel="stylesheet" href="./style.css?v=1.01">
  

  这样浏览器会认为是新文件，重新加载。

3. 给@keyframes加兼容性前缀 #

虽然现在主流浏览器都支持无前缀的@keyframes，但偶尔也会有兼容性问题，你可以给动画加上-webkit前缀试试：

/* 兼容webkit内核浏览器 */
@-webkit-keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(0); }
  75% { transform: translateX(5px); }
  100% { transform: translateX(0); }
}
@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(0); }
  75% { transform: translateX(5px); }
  100% { transform: translateX(0); }
}
/* 对应的元素也要加前缀 */
.shake-text {
  -webkit-animation: shake 0.5s infinite;
  animation: shake 0.5s infinite;
}

4. 测试内嵌CSS是否生效 #

把CSS代码直接内嵌到HTML的<style>标签里，比如：

<style>
@keyframes shake {
  /* 你的动画代码 */
}
/* 其他样式 */
</style>

如果内嵌后动画能正常显示，说明是外部CSS文件的加载问题，回到第一步重新检查路径。

5. 检查CSS语法错误 #

本地浏览器的容错性比较强，可能有些小语法错误不会影响运行，但GitHub Pages的环境可能更严格。你可以用CSS校验工具检查下代码有没有语法问题（比如括号未闭合、百分比写错、属性拼写错误等）。

按照这个顺序排查，应该能解决问题！

内容的提问来源于stack exchange，提问作者Mustafa Niyazi ÜNLÜ