我正在尝试创建一个按颜色顺序亮起的 4x4 table 。共有 5 种颜色，这些颜色在不同的表格列和行中依次亮起。我设法获得一种颜色，但是当我尝试添加另一个关键帧动画时，它会将两个单元格都更改为新颜色吗？任何帮助将非常感激。下面的代码只显示一种颜色。
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<center><h1>Light Sequence</h1></center>
<table>
<table style="background-color: #5D5D5D;" table align="center"
<tr>
<td></td>
<td></td>
<td></td>
<td class="d"></td>
</tr>
<tr>
<td></td>
<td class="a"></td>
<td></td>
<td></td>
</tr>
<tr>
<td class="c"></td>
<td></td>
<td class="b"></td>
<td></td>
</tr>
<tr>
<td></td>
<td class="e"></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
CSS:
td { width:400px; height:200px; border:2px solid #333; }
td.a { background-color:#5D5D5D; }
td.b { background-color:#5D5D5D; }
td.c { background-color:#5D5D5D; }
td.d { background-color:#5D5D5D; }
td.e { background-color:#5D5D5D; }
.a {
height:200px;
width: 400px;
border: 2px solid #333;
-webkit-animation: animate_bg 3s;
animation: animate_bg 3s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
@keyframes animate_bg {
0% {background-color:#5D5D5D;}
100% {background-color:yellow;}
@keyframes animate_bg {
0% {background-color:#5D5D5D;}
100% {background-color:yellow;}
@-webkit-keyframes animate_bg {
0% {background-color:#5D5D5D;}
100% {background-color:yellow;}
最佳答案
您所要做的就是更改每个单元格的关键帧名称。如果每个关键帧执行不同的操作，则它应该有一个唯一名称。
例如:
CSS:
td { width:400px; height:200px; border:2px solid #333; }
td.a { background-color:#5D5D5D; }
td.b { background-color:#000000; }
td.c { background-color:#ffffff; }
td.d { background-color:#414141; }
td.e { background-color:#383838; }
.a {
height:200px;
width: 400px;
border: 2px solid #333;
-webkit-animation: animate_bg 3s;
animation: animate_bg 3s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.b {
height:200px;
width: 400px;
border: 2px solid #333;
-webkit-animation: animate_bg2 3s;
animation: animate_bg2 3s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@keyframes animate_bg {
0% {background-color:#5D5D5D;}
100% {background-color:yellow;}
}
@keyframes animate_bg {
0% {background-color:#5D5D5D;}
100% {background-color:yellow;}
}
@-webkit-keyframes animate_bg {
0% {background-color:#5D5D5D;}
100% {background-color:yellow;}
}
@keyframes animate_bg2 {
0% {background-color:#000000;}
100% {background-color:red;}
}
@keyframes animate_bg2 {
0% {background-color:#000000;}
100% {background-color:red;}
}
@-webkit-keyframes animate_bg2 {
0% {background-color:#000000;}
100% {background-color:red;}
}
查看编辑 Live .
关于html - CSS关键帧动画重叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28282448/