console
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
#total{
width:800px;
height:800px;
position:relative;
border:3px solid #000
}
.tank
{
height:30px;
width:30px;
text-align:center;
border:2px solid #000;
animation-timing-function:ease;
}
#pw{
height:140px;
width:350px;
border:2px solid #000;
position:absolute;
background:#FFCC00;
left:250px;
top:300px;
}
#t1{
position:absolute;
background:#FFCC00;
left:400px;
top:260px;
}
#t2{
position:absolute;
left:250px;
top:450px;
animation:t2 30s;
background:#90EE90;
}
#t3{
position:absolute;
left:290px;
top:450px;
animation:t3 30s;
background:#90EE90;
}
#t4{
position:absolute;
left:330px;
top:450px;
animation:t4 30s;
background:#90EE90;
}
#t5{
position:absolute;
left:370px;
top:450px;
animation:t5 30s;
background:#90EE90;
}
#t6{
position:absolute;
left:410px;
top:450px;
animation:t6 30s;
background:#90EE90;
}
#t7{
position:absolute;
left:450px;
top:450px;
animation:t7 30s;
background:#90EE90;
}
#t8{
position:absolute;
left:490px;
top:450px;
animation:t8 30s;
background:#90EE90;
}
#t9{
position:absolute;
left:530px;
top:450px;
animation:t9 30s;
background:#90EE90;
}
#t10{
position:absolute;
left:570px;
top:450px;
animation:t10 30s;
background:#90EE90;
}
@keyframes t2
{
5% {top:450px;background:red}
10% {top:500px;background:red}
15% {top:500px;background:red}
20% {top:500px;background:red}
25% {top:500px;background:red}
30% {top:500px;background:#90EE90}
35% {top:450px;background:#90EE90}
40% {top:450px;background:#90EE90}
45% {top:450px;background:#90EE90}
50% {top:450px;background:red}
55% {top:500px;background:red}
60% {top:500px;background:red}
65% {top:500px;background:red}
70% {top:500px;background:red}
75% {top:500px;background:#90EE90}
80% {top:450px;background:#90EE90}
85% {top:450px;background:#90EE90}
90% {top:450px;background:#90EE90}
95% {top:450px;background:red}
100% {top:500px;background:red}
}
@keyframes t3
{
5% {top:450px;background:#90EE90}
10% {top:450px;background:red}
15% {top:500px;background:red}
20% {top:500px;background:red}
25% {top:500px;background:red}
30% {top:500px;background:red}
35% {top:500px;background:#90EE90}
40% {top:450px;background:#90EE90}
45% {top:450px;background:#90EE90}
50% {top:450px;background:#90EE90}
55% {top:450px;background:red}
60% {top:500px;background:red}
65% {top:500px;background:red}
70% {top:500px;background:red}
75% {top:500px;background:red}
80% {top:500px;background:#90EE90}
85% {top:450px;background:#90EE90}
90% {top:450px;background:#90EE90}
95% {top:450px;background:#90EE90}
100% {top:450px;background:red}
}
@keyframes t4
{
5% {top:450px;background:#90EE90}
10% {top:450px;background:#90EE90}
15% {top:450px;background:red}
20% {top:500px;background:red}
25% {top:500px;background:red}
30% {top:500px;background:red}
35% {top:500px;background:red}
40% {top:500px;background:#90EE90}
45% {top:450px;background:#90EE90}
50% {top:450px;background:#90EE90}
55% {top:450px;background:#90EE90}
60% {top:450px;background:red}
65% {top:500px;background:red}
70% {top:500px;background:red}
75% {top:500px;background:red}
80% {top:500px;background:red}
85% {top:500px;background:#90EE90}
90% {top:450px;background:#90EE90}
95% {top:450px;background:#90EE90}
100% {top:450px;background:#90EE90}
}
@keyframes t5
{
5% {top:450px;background:#90EE90}
10% {top:450px;background:#90EE90}
15% {top:450px;background:#90EE90}
20% {top:450px;background:red}
25% {top:500px;background:red}
30% {top:500px;background:red}
35% {top:500px;background:red}
40% {top:500px;background:red}
45% {top:500px;background:#90EE90}
50% {top:450px;background:#90EE90}
55% {top:450px;background:#90EE90}
60% {top:450px;background:#90EE90}
65% {top:450px;background:red}
70% {top:500px;background:red}
75% {top:500px;background:red}
80% {top:500px;background:red}
85% {top:500px;background:red}
90% {top:500px;background:#90EE90}
95% {top:450px;background:#90EE90}
100% {top:450px;background:#90EE90}
}
@keyframes t6
{
5% {top:450px;background:#90EE90}
10% {top:450px;background:#90EE90}
15% {top:450px;background:#90EE90}
20% {top:450px;background:#90EE90}
25% {top:450px;background:red}
30% {top:500px;background:red}
35% {top:500px;background:red}
40% {top:500px;background:red}
45% {top:500px;background:red}
50% {top:500px;background:#90EE90}
55% {top:450px;background:#90EE90}
60% {top:450px;background:#90EE90}
65% {top:450px;background:#90EE90}
70% {top:450px;background:red}
75% {top:500px;background:red}
80% {top:500px;background:red}
85% {top:500px;background:red}
90% {top:500px;background:red}
95% {top:500px;background:#90EE90}
100% {top:450px;background:#90EE90}
}
@keyframes t7
{
5% {top:450px;background:#90EE90}
10% {top:450px;background:#90EE90}
15% {top:450px;background:#90EE90}
20% {top:450px;background:#90EE90}
25% {top:450px;background:#90EE90}
30% {top:450px;background:red}
35% {top:500px;background:red}
40% {top:500px;background:red}
45% {top:500px;background:red}
50% {top:500px;background:red}
55% {top:500px;background:#90EE90}
60% {top:450px;background:#90EE90}
65% {top:450px;background:#90EE90}
70% {top:450px;background:#90EE90}
75% {top:450px;background:red}
80% {top:500px;background:red}
85% {top:500px;background:red}
90% {top:500px;background:red}
95% {top:500px;background:red}
100% {top:500px;background:#90EE90}
}
@keyframes t8
{
5% {top:450px;background:#90EE90}
10% {top:450px;background:#90EE90}
15% {top:450px;background:#90EE90}
20% {top:450px;background:#90EE90}
25% {top:450px;background:#90EE90}
30% {top:450px;background:#90EE90}
35% {top:450px;background:red}
40% {top:500px;background:red}
45% {top:500px;background:red}
50% {top:500px;background:red}
55% {top:500px;background:red}
60% {top:500px;background:#90EE90}
65% {top:450px;background:#90EE90}
70% {top:450px;background:#90EE90}
75% {top:450px;background:#90EE90}
80% {top:450px;background:red}
85% {top:500px;background:red}
90% {top:500px;background:red}
95% {top:500px;background:red}
100% {top:500px;background:red}
}
@keyframes t9
{
5% {top:450px;background:#90EE90}
10% {top:450px;background:#90EE90}
15% {top:450px;background:#90EE90}
20% {top:450px;background:#90EE90}
25% {top:450px;background:#90EE90}
30% {top:450px;background:#90EE90}
35% {top:450px;background:#90EE90}
40% {top:450px;background:red}
45% {top:500px;background:red}
50% {top:500px;background:red}
55% {top:500px;background:red}
60% {top:500px;background:red}
65% {top:500px;background:#90EE90}
70% {top:450px;background:#90EE90}
75% {top:450px;background:#90EE90}
80% {top:450px;background:#90EE90}
85% {top:450px;background:red}
90% {top:500px;background:red}
95% {top:500px;background:red}
100% {top:500px;background:red}
}
@keyframes t10
{
5% {top:450px;background:#90EE90}
10% {top:450px;background:#90EE90}
15% {top:450px;background:#90EE90}
20% {top:450px;background:#90EE90}
25% {top:450px;background:#90EE90}
30% {top:450px;background:#90EE90}
35% {top:450px;background:#90EE90}
40% {top:450px;background:#90EE90}
45% {top:450px;background:red}
50% {top:500px;background:red}
55% {top:500px;background:red}
60% {top:500px;background:red}
65% {top:500px;background:red}
70% {top:500px;background:#90EE90}
75% {top:450px;background:#90EE90}
80% {top:450px;background:#90EE90}
85% {top:450px;background:#90EE90}
90% {top:450px;background:red}
95% {top:500px;background:red}
100% {top:500px;background:red}
}
</style>
<body>
<div id="total">
<div class="tank" id="pw">
PW
</div>
<div class="tank" id="t1">
MT
</div>
<div class="tank" id="t2">
2T
</div>
<div class="tank" id="t3">
3T
</div>
<div class="tank" id="t4" >
4T
</div>
<div class="tank" id="t5">
5T
</div>
<div class="tank" id="t6">
6T
</div>
<div class="tank" id="t7">
7T
</div>
<div class="tank" id="t8">
8T
</div>
<div class="tank" id="t9">
9T
</div>
<div class="tank" id="t10">
10T
</div>
</div>
</body>
</html>