Question

世界上很棒的编码员！新手在这里进行编码，甚至在检查了有关stackoverflow的各种其他问题的答案之后，我似乎无法解决这个简单的@keyframe代码。

我的Html：

<!DOCTYPE html>

<html>

<head>

<title>blank</title>
<link rel="stylesheet" href="@keyframes & animation.css"/>

</head>

<body>

<div class="div"></div>

</body>

</html>

我的CSS：

.div {

width:100px;
height:100px;
background-color: red;
animation-name: Flashlights;
animation-duration: 3s;
-webkit-animation-name: Flashlights;
-webkit-animation-duration: 3s;

{

@keyframes Flashlights /* "Flashlights" is my own name - not an attribute. */ {

0% {background-color: red;}
20% {background-color: pink;}
30% {background-color: brown;}
40% {background-color: grey;}
50% {background-color: yellow;}
60% {background-color: orange;}
70% {background-color: white;}
80% {background-color: green;}
90% {background-color: blue;}
100% {background-color: black;}

}

@-webkit-keyframes Flashlights {

0% {background-color: red;}
20% {background-color: pink;}
30% {background-color: brown;}
40% {background-color: grey;}
50% {background-color: yellow;}
60% {background-color: orange;}
70% {background-color: white;}
80% {background-color: green;}
90% {background-color: blue;}
100% {background-color: black;}

}

就是这样。我正在研究每个元素，然后自己尝试它们，但这个似乎不起作用..

Answer 1

第二个括号是错误的类型（在div css之后直接更改{to}）

Answer 2

嗯，我注意到了几件事。首先，您的第一个动画称为Flashinglights，而不是Flashlights，这是其他地方使用的动画。然后你的括号有一些问题。第一个动画没有一个左括号，而.div选择器的右括号不是正确的方向，它目前只是另一个开放括号。

Answer 3

部分原因是您没有在任何地方为关键帧使用相同的名称。另外，请务必关闭div CSS类 - 您将其打开，打破关键帧类。

div {
}

Working jsFiddle

为什么我的CSS @keyframe动画不起作用？

3 个答案: