所以我已经尝试解决这个问题一个多小时了。我使用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;}
}
最佳答案
我添加了其他供应商前缀，但除此之外您的代码应该可以正常工作，如下所示:
#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>作为旁注，我更改了百分比并添加了一个关键帧以平滑过渡回蓝色。
关于html - 带关键帧的 CSS3 动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30009555/