CSS中keyframes方法失效求助：from语句不被识别

问题描述 #

开发HTML网站时遇到CSS的@keyframes方法无法正常工作的问题：

• 在@keyframes navLinkFade代码块中，编辑器无法识别from语句，正常情况下from应显示为蓝色，opacity命令应显示为灰色，但当前均未正确高亮显示
• 该语法异常导致网站导航栏的淡入动画无法按预期运行

问题截图 #

我的CSS代码 #

body {
  margin: 0;
  padding: 0;
  animation: bgcolor infinite 20s;
}

h1 {
  font-family: 'Yeseva One', cursive;
  font-size: 4em;
  margin: 0;
  color: #fff;
}

@keyframes bgcolor {
  0% {
    background: #f1c40f;
  }
  10% {
    background: #f39c12;
  }
  20% {
    background: #e67e22;
  }
  30% {
    background: #d35400;
  }
  40% {
    background: #e74c3c;
  }
  50% {
    background: #c0392b;
  }
  60% {
    background: #e74c3c;
  }
  70% {
    background: #d35400;
  }
  80% {
    background: #e67e22;
  }
  90% {
    background: #f39c12;
  }
  100% {
    background: #f1c40f;
  }
}

h2 {
  font-family: 'IM Fell DW Pica', serif;
  font-size: 3em;
  margin: 0;
  color: #fff;
}

p {
  font-family: 'Clicker Script', cursive;
  font-size: 2em;
  margin: 0;
  color: #fff;
}

button {
  font-family: 'Playfair Display SC', serif;
  font-size: 1em;
}

button {
  margin: 0;
  border: none;
  background: #ea1538;
  padding: 12px 30px;
  border-radius: 30px;
  color: white;
  font-weight: bold;
  box-sizing: border-box;
  transition: .3s
}

button:hover {
  transform: scale(1.3);
  cursor: pointer;
}

.hero {
  height: 100vh;
  width: 100%;
}

nav {
  display: flex;
  align-items: center;
  min-height: 8vh;
  justify-content: space-between;
  padding-left: 25%;
  padding-right: 10%;
}

.logo {
  color: white;
  font-size: 28px;
}

.nav-links {
  display: flex;
  justify-content: space-between;
}

.nav-links a {
  text-decoration: none;
  letter-spacing: 1px;
}

.line {
  width: 100%;
  height: 3px;
  background-color: white;
  margin: 5px;
}

.burger {
  display: none;
  cursor: pointer;
}

.burger div {
  width: 25px;
  height: 3px;
  background-color: white;
  margin: 5px;
}

span {
  color: #000000;
}

nav ul li {
  list-style-type: none;
  display: inline-block;
  padding: 10px 20px;
  font-size: 19px;
}

nav ul li a {
  color: white;
  text-decoration: none;
  font-weight: bold;
}

nav ul li a:hover {
  color: #000000;
  transition: .2s;
}

@media screen and (max-width:1024px) {
  .nav-links {
    display: flex;
    justify-content: space-between;
    width: 60%;
  }
}

@media screen and (max-width:768px) {
  body {
    overflow-x: hidden;
  }
  .nav-links {
    position: absolute;
    background-color: #ffeaa7;
    /*just to see if the slider works*/
    right: 0px;
    height: 100vh;
    top: 18vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 40%;
    transform: translateX(100%);
    transition: transform 0.5s ease-in;
  }
  .nav-links li {
    opacity: 0;
  }
  .burger {
    padding-left: 100%;
    display: block;
  }
}

.nav-active {
  transform: translateX(0%);
}

@keyframes navLinkFade {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0px);
  }
}

解决方案 #

1. 编辑器语法高亮异常解决

• 检查文件扩展名：确保样式文件后缀是.css，而非.txt或其他格式，编辑器依赖扩展名识别语法类型
• 手动切换语法模式：在编辑器中（比如VS Code右下角）选择CSS作为当前文件的语言模式
• 更新编辑器插件：如果使用VS Code等工具，更新默认的CSS语法支持插件，或重新安装相关扩展

2. 动画实际不生效解决

你已定义navLinkFade动画，但未将其应用到导航栏的<li>元素上，需添加以下CSS规则：

.nav-active li {
  animation: navLinkFade 0.5s ease forwards;
}

/* 可选：给列表项添加延迟，实现依次淡入的层级效果 */
.nav-active li:nth-child(1) { animation-delay: 0.1s; }
.nav-active li:nth-child(2) { animation-delay: 0.2s; }
.nav-active li:nth-child(3) { animation-delay: 0.3s; }

同时需要配套JavaScript代码触发动画：

document.querySelector('.burger').addEventListener('click', () => {
  document.querySelector('.nav-links').classList.toggle('nav-active');
});

修改后，点击汉堡菜单时，导航栏列表项会按照navLinkFade的设置淡入显示。

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