Наложение анимации ключевого кадра CSS

Я пытаюсь создать таблицу 4x4, которая загорается в цветовой последовательности. Есть всего 5 цветов, и они светятся последовательно в разных столбцах и строках таблицы. Мне удалось получить один цвет, но когда я пытаюсь добавить еще одну анимацию Keyframe, она меняет обе ячейки на новый цвет? Любая помощь приветствуется. В приведенном ниже коде показан только один цвет.Наложение анимации ключевого кадра CSS

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

}

источник

2015-02-02 Bob

У вас неправильный HTML-код в начале таблицы. –

Можете ли вы более четко узнать, что вы хотите? Это случайный квадрат, и каждый следующий квадрат загорается со следующим цветом? –

Первый квадрат должен загорать определенный цвет, затем должен погаснуть, а затем следующий квадрат должен загореться и так далее, поэтому его в последовательности света – Bob

Все, что вам нужно сделать, это изменить имя ключевого кадра для каждой ячейки. Каждый ключевой кадр должен иметь имя уникальное имя, если оно выполняет другое действие.

Для примера:

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.

источник

2015-02-02 16:53:50

Большое спасибо! – Bob

Знаете ли вы способ сделать так, чтобы первый квадрат выключился, а затем включился и так далее? – Bob

Да, конечно, вам нужно будет добавить задержку анимации в каждом ключевом кадре, так что первая будет отложена на 0 секунд, а вторая будет задержана, например, на 5 секунд, поэтому последовательность будет равна 0,5,10 , 15 и т. Д. Это означает, что задержка между анимацией и другой составляет 5 секунд. –

Наложение анимации ключевого кадра CSS

ответ

Смежные вопросы