带有关键帧的 CSS3 动画答案

【问题标题】：CSS3 animations with keyframes带有关键帧的 CSS3 动画
【发布时间】：2015-07-12 14:58:58
【问题描述】：

所以我已经尝试解决这个问题一个多小时了。我使用 Notepad++ 作为我的代码编辑器，我一直在尝试做一个 css3 动画，但它不起作用。 Notepad++ 无法识别“@-webkit-keyframes”中的“@”。它保持黑色，而其他文本以蓝色突出显示。我无数次制作新文件，但没有任何效果。我的代码如下：

HTML：

    <!DOCTYPE html>
    <html>
      <head>
        <title>Animation</title>
        <link href="stylesheetani.css" rel="stylesheet" type="text/css"/>
      </head>
      <body>
        <div id="change">
        </div>
      </body>
    </html>

CSS：

    #change {
      width: 100px;
      height: 100px;
      border: 2px solid black;
      -webkit-animation: changeColor 8s infinite;
    }

    @-webkit-keyframes changeColor {
      0% {background-color: blue;}
      25% {background-color: yellow;}
      50% {background-color: green;}
      75%{background-color: red;}
      100% {background-color: black;}
    }

【问题讨论】：

你用的是什么浏览器？
Notepad++ 不会运行您的代码，它只是试图突出显示您的语法。仅仅因为 @-webkit-keyframes 不是正确的颜色并不意味着您的代码不正确，这只是意味着 Notepad++ 不支持该特定 CSS 选择器的语法突出显示。
如果我将文本放在 Notepad++ 中，它会正常突出显示。也许您没有使用最新版本。但是，代码应该可以工作。（另外，你在 75% 之后会丢失一个空格，但这没关系）
我正在使用 Chrome。我刚刚又试了一次，它奏效了。我不知道出了什么问题，但感谢您的帮助！
我建议你使用现代浏览器的开发工具来编辑 CSS。使用哪个取决于您，但其中任何一个都是比使用外部工具更好的工作方式（恕我直言）

标签： html css notepad++ css-animations

【解决方案1】：

我添加了其他供应商前缀，但除此之外您的代码应该可以正常工作，如下所示：

#change {
  width: 100px;
  height: 100px;
  border: 2px solid black;
  -webkit-animation: changeColor 8s infinite;
  -moz-animation: changeColor 8s infinite;
  animation: changeColor 8s infinite;
}

@-webkit-keyframes changeColor {
  0% {background-color: blue;}
  20% {background-color: yellow;}
  40% {background-color: green;}
  60% {background-color: red;}
  80% {background-color: black;}
  100% {background-color: blue;}
}

@-moz-keyframes changeColor {
  0% {background-color: blue;}
  20% {background-color: yellow;}
  40% {background-color: green;}
  60% {background-color: red;}
  80% {background-color: black;}
  100% {background-color: blue;}
}

@keyframes changeColor {
  0% {background-color: blue;}
  20% {background-color: yellow;}
  40% {background-color: green;}
  60% {background-color: red;}
  80% {background-color: black;}
  100% {background-color: blue;}
}

&lt;div id="change"&gt;&lt;/div&gt;

作为旁注，我更改了百分比并添加了一个关键帧以平稳过渡回蓝色。

【讨论】：

仅供参考 Firefox 使用无前缀动画已经有一段时间了。
@TylerH 仅供参考，向后兼容是一回事 :)
谢谢！它现在起作用了。我不知道出了什么问题
@Snoop2001 正如我所说，没有任何问题。缺少语法高亮并不意味着您的代码不正确。
@PatrickRoberts Firefox 37 绝对是现代浏览器。 Firefox 5 到 15，几乎没有那么多。