CSS3 个带关键帧的动画

Question

所以我已经尝试解决这个问题一个多小时了。我使用 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;}
    }

Answer 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;}
}

<div id="change"></div>

附带说明一下，我更改了百分比并添加了一个关键帧以平滑过渡回蓝色。

CSS3 个带关键帧的动画

CSS3 animations with keyframes

html

css

notepad++

css-animations