CSS动画重复

时间:2015-02-03 16:15:37

标签: html css css3

我已经设法使它成为一个轻量级序列,并且时间正确。然而,在第一个动画播放后,它开始像迪斯科一样随机播放颜色。我怎样才能让动画一遍又一遍地重复。

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 7s;
-webkit-animation-delay: 1s; /* Chrome, Safari, Opera */
animation-delay: 1s;
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 6s;
-webkit-animation-delay: 2s; /* Chrome, Safari, Opera */
animation-delay: 2s;
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 4s;
-webkit-animation-delay: 3s; /* Chrome, Safari, Opera */
animation-delay: 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;
-webkit-animation-delay: 4s; /* Chrome, Safari, Opera */
animation-delay: 4s;
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 2s;
-webkit-animation-delay: 5s; /* Chrome, Safari, Opera */
animation-delay: 5s;
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;}  
}

1 个答案:

答案 0 :(得分:0)

使用其他关键帧来制作延迟而不是动画延迟。 例如:

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

同时运行所有动画。