网站Navbar导航栏动画失效，CSS存在25处错误求助

• 先搞定CSS的25个错误：
  • 打开浏览器F12开发者工具，切到控制台面板，里面会列出所有CSS错误的具体行号和原因，比如拼写错属性名、缺分号、颜色值不合法这些，照着提示逐一改就行。新手优先看红色的错误提示，优先级最高。
  • 也可以用在线CSS校验工具把你的代码贴进去，它会把错误列得更清楚。
• 再排查动画不运行的问题：
  • 检查@keyframes的定义：确保动画名称和你给导航栏元素加的animation-name完全一致，大小写也要注意。
  • 核对animation属性的写法：简写的时候顺序不能乱，标准顺序是 动画名 时长 速度曲线 延迟 循环次数 方向 填充模式，少写某个值可能导致动画不触发。
  • 确认导航栏元素的布局：动画元素如果是display: inline，有些动画（比如transform）可能不生效，改成inline-block或block试试；另外如果元素被其他元素遮挡，动画也看不到，检查z-index值。
  • 用开发者工具的Elements面板：选中导航栏元素，看Styles标签里的动画属性是不是划掉了——划掉说明被其他样式覆盖了，要么提高选择器优先级，要么调整样式顺序。

小技巧：先把CSS错误全修完再看动画，很多时候动画失效就是因为CSS语法错误导致后续代码没生效。

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