CSS关键帧动画延迟

Question

您好，由于某些原因，我似乎无法让表格中的颜色方块在不同时间出现。 我想它，所以第一种颜色出现然后消失，然后第二种颜色出现并消失，然后第三种颜色出现然后消失，依此类推。 我希望它如此顺序。 任何帮助，将不胜感激。

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;
}

.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;
}
.c {
height:200px;
width: 400px;
border: 2px solid #333;
-webkit-animation: animate_bg3 3s;
animation: animate_bg3 3s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.d {
height:200px;
width: 400px;
border: 2px solid #333;
-webkit-animation: animate_bg4 3s;
animation: animate_bg4 3s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.e {
height:200px;
width: 400px;
border: 2px solid #333;
-webkit-animation: animate_bg5 3s;
animation: animate_bg5 3s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}

@keyframes animate_bg {  
0%   {background-color:#5D5D5D;}
50%   {background-color:yellow;}  
100% {background-color:#5D5D5D;}  
}

@keyframes animate_bg {
0%   {background-color:#5D5D5D;}
50% {background-color:yellow;}
100% {background-color:#5D5D5D;}  
}

@-webkit-keyframes animate_bg {
0%   {background-color:#5D5D5D;}
50% {background-color:yellow;}
100% {background-color:#5D5D5D;}  
}

@keyframes animate_bg2 {  
0%   {background-color:#5D5D5D;}  
50% {background-color:green;}
100% {background-color:#5D5D5D;}    
}

@keyframes animate_bg2 {
0%   {background-color:#5D5D5D;}
50% {background-color:green;}
100% {background-color:#5D5D5D;}  
}

@-webkit-keyframes animate_bg2 {
0%   {background-color:#5D5D5D;}
50% {background-color:green;}
100% {background-color:#5D5D5D;}  
}
@keyframes animate_bg3 {  
0%   {background-color:#5D5D5D;}  
50% {background-color:blue;}
100% {background-color:#5D5D5D;}    
}

@keyframes animate_bg3 {
0%   {background-color:#5D5D5D;}
50% {background-color:blue;}
100% {background-color:#5D5D5D;}  
}

@-webkit-keyframes animate_bg3 {
0%   {background-color:#5D5D5D;}
50% {background-color:blue;}
100% {background-color:#5D5D5D;}  
}
@keyframes animate_bg4 {  
0%   {background-color:#5D5D5D;}  
50% {background-color:white;}
100% {background-color:#5D5D5D;}    
}

@keyframes animate_bg4 {
0%   {background-color:#5D5D5D;}
50% {background-color:white;}
100% {background-color:#5D5D5D;}  
}

@-webkit-keyframes animate_bg4 {
0%   {background-color:#5D5D5D;}
50% {background-color:white;}
100% {background-color:#5D5D5D;}  
}
@keyframes animate_bg5 {  
0%   {background-color:#5D5D5D;}
50%   {background-color:orange;}  
100% {background-color:#5D5D5D;}  
}

@keyframes animate_bg5 {
0%   {background-color:#5D5D5D;}
50% {background-color:orange;}
100% {background-color:#5D5D5D;}  
}

@-webkit-keyframes animate_bg5 {
0%   {background-color:#5D5D5D;}
50% {background-color:orange;}
100% {background-color:#5D5D5D;}  
}

Answer 1

尝试使用动画延迟 ：

div {
    -webkit-animation-delay: 2s; /* Chrome, Safari, Opera */
    animation-delay: 2s;
}

Answer 2

这是它运行，在HTML中解释..

 table{text-align:center;background-color:#5d5d5d;} td { width:400px; height:100px; border:2px solid #333; background-color:#5D5D5D; } .a { -webkit-animation: animate_bg 3s; animation: animate_bg 3s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .b { -webkit-animation: animate_bg2 3s; animation: animate_bg2 3s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-delay: 2s; /* Chrome, Safari, Opera */ animation-delay: 2s; } .c { -webkit-animation: animate_bg3 3s; animation: animate_bg3 3s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-delay: 4s; /* Chrome, Safari, Opera */ animation-delay: 4s; } .d { -webkit-animation: animate_bg4 3s; animation: animate_bg4 3s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-delay: 6s; /* Chrome, Safari, Opera */ animation-delay: 6s; } .e { -webkit-animation: animate_bg5 3s; animation: animate_bg5 3s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-delay: 8s; /* Chrome, Safari, Opera */ animation-delay: 8s; } @keyframes animate_bg { 0% {background-color:#5D5D5D;} 50% {background-color:yellow;} 100% {background-color:#5D5D5D;} } @keyframes animate_bg { 0% {background-color:#5D5D5D;} 50% {background-color:yellow;} 100% {background-color:#5D5D5D;} } @-webkit-keyframes animate_bg { 0% {background-color:#5D5D5D;} 50% {background-color:yellow;} 100% {background-color:#5D5D5D;} } @keyframes animate_bg2 { 0% {background-color:#5D5D5D;} 50% {background-color:green;} 100% {background-color:#5D5D5D;} } @keyframes animate_bg2 { 0% {background-color:#5D5D5D;} 50% {background-color:green;} 100% {background-color:#5D5D5D;} } @-webkit-keyframes animate_bg2 { 0% {background-color:#5D5D5D;} 50% {background-color:green;} 100% {background-color:#5D5D5D;} } @keyframes animate_bg3 { 0% {background-color:#5D5D5D;} 50% {background-color:blue;} 100% {background-color:#5D5D5D;} } @keyframes animate_bg3 { 0% {background-color:#5D5D5D;} 50% {background-color:blue;} 100% {background-color:#5D5D5D;} } @-webkit-keyframes animate_bg3 { 0% {background-color:#5D5D5D;} 50% {background-color:blue;} 100% {background-color:#5D5D5D;} } @keyframes animate_bg4 { 0% {background-color:#5D5D5D;} 50% {background-color:white;} 100% {background-color:#5D5D5D;} } @keyframes animate_bg4 { 0% {background-color:#5D5D5D;} 50% {background-color:white;} 100% {background-color:#5D5D5D;} } @-webkit-keyframes animate_bg4 { 0% {background-color:#5D5D5D;} 50% {background-color:white;} 100% {background-color:#5D5D5D;} } @keyframes animate_bg5 { 0% {background-color:#5D5D5D;} 50% {background-color:orange;} 100% {background-color:#5D5D5D;} } @keyframes animate_bg5 { 0% {background-color:#5D5D5D;} 50% {background-color:orange;} 100% {background-color:#5D5D5D;} } @-webkit-keyframes animate_bg5 { 0% {background-color:#5D5D5D;} 50% {background-color:orange;} 100% {background-color:#5D5D5D;} } 

 <section> <h1>Light Sequence with css only</h1> <p>Put the color,width and height of td's in the top declaration only as they were needlessly repeated multiple times. I didn't realise myself, but for animation delay to work it has to be after the animation call, seems to work then. Mucked around with the timing but couldn't get them to stay in time.2 table tags, one with style removed and style put in css. </p> </section> <table> <tr> <td class="a">a</td> <td class="b">b</td> <td class="c">c</td> <td class="d">d</td> <td class="e">e</td> </tr> </table> 

Answer 3

创建你自己的动画：

div {
width: 100px;
height: 100px;
background: red;
-webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */
animation: myfirst 5s;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
    0%   {background: red;}
    20%   {background: red;}
    25%  {background: yellow;}
    40%  {background: yellow;}
    50%  {background: blue;}
    70%  {background: blue;}
    75% {background: green;}
    95% {background: green;}
    100% {background: red;}
}

/* Standard syntax */
@keyframes myfirst {
    0%   {background: red;}
    20%   {background: red;}
    25%  {background: yellow;}
    40%  {background: yellow;}
    50%  {background: blue;}
    70%  {background: blue;}
    75% {background: green;}
    95% {background: green;}
    100% {background: red;}
}

http://jsfiddle.net/DariuszMusielak/L9fmktvr/