具有关键帧的CSS3动画

Question

So I have been trying to solve this problem for over an hour. 因此，我已经尝试解决这个问题一个多小时了。 I use Notepad++ as my code editor, and I have been trying to do a css3 animation, but it won't work. 我使用Notepad ++作为我的代码编辑器，并且我一直在尝试制作css3动画，但是它不起作用。 Notepad++ will not recognize the "@" in "@-webkit-keyframes." Notepad ++无法识别“ @ -webkit-keyframes”中的“ @”。 It remains black while the other text is highlighted blue. 它保持黑色，而其他文本突出显示为蓝色。 I have made new files countless times and nothing works. 我制作了无数次新文件，但没有任何效果。 My code is below: 我的代码如下：

HTML: 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: 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

I added the other vendor prefixes, but other than that your code should work properly, as demonstrated below: 我添加了其他供应商前缀，但除此之外，您的代码应该可以正常工作，如下所示：

 #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>

As a side note, I changed the percentages and added one more keyframe to smoothly transition back to blue. 附带说明一下，我更改了百分比并添加了另一个关键帧以平滑地过渡回蓝色。

具有关键帧的CSS3动画

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-05-03 02:25:25

具有关键帧的CSS3动画

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-05-03 02:25:25

解决方案1
1 已采纳 2015-05-03 02:25:25