CSS关键帧动画重叠答案

【问题标题】：CSS Keyframe animation overlappingCSS关键帧动画重叠
【发布时间】：2015-02-04 21:36:36
【问题描述】：

我正在尝试创建一个以颜色序列点亮的 4x4 表格。共有 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;}

}

【问题讨论】：

表格开头的 HTML 不正确。
你能更清楚你想要什么吗？是不是一个随机的方块，每一个连续的方块都会亮起下一种颜色？
第一个方块应该亮某种颜色然后应该关闭然后下一个方块应该亮等等，所以它在一个光序列中

标签： html css

【解决方案1】：

您所要做的就是更改每个单元格的关键帧的名称。如果执行不同的操作，每个关键帧都应该有一个唯一的名称。

例如：

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。

【讨论】：

你知道一种方法可以让第一个方块关闭，然后第二个方块打开，依此类推吗？
是的，当然，你只需要在每个关键帧中添加animation-delay，例如第一个延迟0秒，第二个延迟5秒，所以序列将是 0,5,10,15 等。这意味着动画和另一个之间的延迟是 5 秒。