پیشنمایش زنده
کد HTML
<div id="timer">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>
<div id="div6"></div>
<div id="div7"></div>
<div id="div8"></div>
<div id="div9"></div>
<div id="div10"></div>
<div id="div11"></div>
<div id="div12"></div>
<div id="div13"></div>
<div id="div14"></div>
<div id="div15"></div>
</div>
کد CSS
#timer {
display: grid;
grid-template-columns: repeat(3, 25px);
grid-template-rows: repeat(5, 25px);
gap: 10px;
position: absolute;
grid-template-areas:
"div1 div2 div3"
"div4 div5 div6"
"div7 div8 div9"
"div10 div11 div12"
"div13 div14 div15";
}
#div1,
#div2,
#div3,
#div4,
#div5,
#div6,
#div7,
#div8,
#div9,
#div10,
#div11,
#div12,
#div13,
#div14,
#div15 {
background-color: rgb(243, 243, 243);
border-radius: 5px;
}
#div1 {
grid-area: div1;
animation: div1 10s both infinite;
}
@keyframes div1 {
0% {
transform: translateX(0);
}
10% {
transform: translateX(70px);
}
20% {
transform: translateX(0);
}
30% {
transform: translateX(0);
}
40% {
transform: translateX(0);
}
50% {
transform: translateX(0);
}
60% {
transform: translateX(0);
}
70% {
transform: translateX(0);
}
80% {
transform: translateX(0);
}
90% {
transform: translateX(0);
}
100% {
transform: translateX(0);
}
}
#div2 {
grid-area: div2;
animation: div2 10s both infinite;
}
@keyframes div2 {
0% {
transform: translateX(0);
}
10% {
transform: translateX(35px);
}
20% {
transform: translateX(0);
}
30% {
transform: translateX(0);
}
40% {
transform: translateX(35px);
}
50% {
transform: translateX(0);
}
60% {
transform: translateX(0);
}
70% {
transform: translateX(0);
}
80% {
transform: translateX(0);
}
90% {
transform: translateX(0);
}
100% {
transform: translateX(0);
}
}
#div3 {
grid-area: div3;
}
#div4 {
grid-area: div4;
animation: div4 10s both infinite;
}
@keyframes div4 {
0% {
transform: translateX(0);
}
10% {
transform: translateX(70px);
}
20% {
transform: translateX(70px);
}
30% {
transform: translateX(70px);
}
40% {
transform: translateX(0);
}
50% {
transform: translateX(0);
}
60% {
transform: translateX(0);
}
70% {
transform: translateX(70px);
}
80% {
transform: translateX(0);
}
90% {
transform: translateX(0);
}
100% {
transform: translateX(0);
}
}
#div5 {
grid-area: div5;
display: none;
}
#div6 {
grid-area: div6;
animation: div6 10s both infinite;
}
@keyframes div6 {
0% {
transform: translateX(0);
}
10% {
transform: translateX(0);
}
20% {
transform: translateX(0);
}
30% {
transform: translateX(0);
}
40% {
transform: translateX(0);
}
50% {
transform: translateX(-70px);
}
60% {
transform: translateX(-70px);
}
70% {
transform: translateX(0);
}
80% {
transform: translateX(0);
}
90% {
transform: translateX(0);
}
100% {
transform: translateX(0);
}
}
#div7 {
grid-area: div7;
animation: div7 10s both infinite;
}
@keyframes div7 {
0% {
transform: translateX(0);
}
10% {
transform: translateX(70px);
}
20% {
transform: translateX(0);
}
30% {
transform: translateX(0);
}
40% {
transform: translateX(0);
}
50% {
transform: translateX(0);
}
60% {
transform: translateX(0);
}
70% {
transform: translateX(70px);
}
80% {
transform: translateX(0);
}
90% {
transform: translateX(0);
}
100% {
transform: translateX(0);
}
}
#div8 {
grid-area: div8;
animation: div8 10s both infinite;
}
@keyframes div8 {
0% {
transform: translateX(35px);
}
10% {
transform: translateX(35px);
}
20% {
transform: translateX(0);
}
30% {
transform: translateX(0);
}
40% {
transform: translateX(0);
}
50% {
transform: translateX(0);
}
60% {
transform: translateX(0);
}
70% {
transform: translateX(35px);
}
80% {
transform: translateX(0);
}
90% {
transform: translateX(0);
}
100% {
transform: translateX(35px);
}
}
#div9 {
grid-area: div9;
}
#div10 {
grid-area: div10;
animation: div10 10s both infinite;
}
@keyframes div10 {
0% {
transform: translateX(0);
}
10% {
transform: translateX(70px);
}
20% {
transform: translateX(0);
}
30% {
transform: translateX(70px);
}
40% {
transform: translateX(70px);
}
50% {
transform: translateX(70px);
}
60% {
transform: translateX(0);
}
70% {
transform: translateX(70px);
}
80% {
transform: translateX(0);
}
90% {
transform: translateX(70px);
}
100% {
transform: translateX(0);
}
}
#div11 {
grid-area: div11;
display: none;
}
#div12 {
grid-area: div12;
animation: div12 10s both infinite;
}
@keyframes div12 {
0% {
transform: translateX(0);
}
10% {
transform: translateX(0);
}
20% {
transform: translateX(-70px);
}
30% {
transform: translateX(0);
}
40% {
transform: translateX(0);
}
50% {
transform: translateX(0);
}
60% {
transform: translateX(0);
}
70% {
transform: translateX(0);
}
80% {
transform: translateX(0);
}
90% {
transform: translateX(0);
}
100% {
transform: translateX(0);
}
}
#div13 {
grid-area: div13;
animation: div13 10s both infinite;
}
@keyframes div13 {
0% {
transform: translateX(0);
}
10% {
transform: translateX(70px);
}
20% {
transform: translateX(0);
}
30% {
transform: translateX(0);
}
40% {
transform: translateX(70px);
}
50% {
transform: translateX(0);
}
60% {
transform: translateX(0);
}
70% {
transform: translateX(70px);
}
80% {
transform: translateX(0);
}
90% {
transform: translateX(0);
}
100% {
transform: translateX(0);
}
}
#div14 {
grid-area: div14;
animation: div14 10s both infinite;
}
@keyframes div14 {
0% {
transform: translateX(0);
}
10% {
transform: translateX(35px);
}
20% {
transform: translateX(0);
}
30% {
transform: translateX(0);
}
40% {
transform: translateX(35px);
}
50% {
transform: translateX(0);
}
60% {
transform: translateX(0);
}
70% {
transform: translateX(35px);
}
80% {
transform: translateX(0);
}
90% {
transform: translateX(0);
}
100% {
transform: translateX(0);
}
}
#div15 {
grid-area: div15;
}