CSS Keyframe animation delay

Question

Hello for some reason I cannot seem to get the color squares in the table to appear at different times. I would like it so the first color appears and then disappears, then the second color appears and disappears, then the third color appears then disappears and so on. I would like it so it is in a light sequence. Any help would be appreciated.

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

don't think css has a success callback, you might have to use javascript for this.You would be able to set delays in css but unless you got it millisecond perfect it look a bit out n different browsers — Billy
– Billy, Commented Feb 2, 2015 at 20:22
Oh right, do you know how to go about adding a delay in css? — Bob
– Bob, Commented Feb 2, 2015 at 20:27
CBroe, I see that earlier and tried to add it into my css but unfortunately it did not work. — Bob
– Bob, Commented Feb 2, 2015 at 20:37

Kroltan · Accepted Answer · 2015-02-02 22:36:27Z

5

Try to use animation delay:

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

edited Feb 2, 2015 at 22:36

Kroltan

5,1565 gold badges40 silver badges64 bronze badges

answered Feb 2, 2015 at 20:39

Hanna Letska

843 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Billy Over a year ago

how's this upvoted ? this work does it ? one line of code with HTML and CSS mixed all in one...

Bob Over a year ago

Yes the up vote did work, I have managed to get the timing but cannot seem to repeat the animation, it only plays once in the correct timing and then after it goes funny.

Bob · Accepted Answer · 2015-02-02 20:45:55Z

Create youy own animation:

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/

Billy · Accepted Answer · 2015-02-02 22:17:12Z

here's it running, explanation in the 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>

Hi, sorry but unfortunately this did not work, thanks anyway.
back now, i was rushing out the door, I'll have a better look now, give me 15 and i'll update the answer
Ok, I have managed to get everything working but I cannot seem to make the CSS animation continue to play?

Collectives™ on Stack Overflow

CSS Keyframe animation delay

3 Answers 3

2 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related