CSS關鍵幀動畫重疊

Question

我正在嘗試創建一個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;}

}

Answer 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 。

CSS關鍵幀動畫重疊

問題描述

1 個解決方案

解決方案1
1 2015-02-02 16:53:50

CSS關鍵幀動畫重疊

問題描述

1 個解決方案

解決方案1 1 2015-02-02 16:53:50

解決方案1
1 2015-02-02 16:53:50