Skip to content

Commit 8280252

Browse files
rajatrsrivastavrajatrsrivastav
authored
added Pixel Transition Animation (#3278)
1 parent d6ecc3c commit 8280252

3 files changed

Lines changed: 120 additions & 0 deletions

File tree

‎Art/rajatrsrivastav-Pixel-Transition-Animation/index.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Pixel Transition</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="pixel-grid">
11+
<div class="pixel"></div>
12+
<div class="pixel"></div>
13+
<div class="pixel"></div>
14+
<div class="pixel"></div>
15+
<div class="pixel"></div>
16+
<div class="pixel"></div>
17+
<div class="pixel"></div>
18+
<div class="pixel"></div>
19+
<div class="pixel"></div>
20+
<div class="pixel"></div>
21+
<div class="pixel"></div>
22+
<div class="pixel"></div>
23+
<div class="pixel"></div>
24+
<div class="pixel"></div>
25+
<div class="pixel"></div>
26+
<div class="pixel"></div>
27+
<div class="pixel"></div>
28+
<div class="pixel"></div>
29+
<div class="pixel"></div>
30+
<div class="pixel"></div>
31+
<div class="pixel"></div>
32+
<div class="pixel"></div>
33+
<div class="pixel"></div>
34+
<div class="pixel"></div>
35+
<div class="pixel"></div>
36+
</div>
37+
</body>
38+
</html>

‎Art/rajatrsrivastav-Pixel-Transition-Animation/meta.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"artName": "Pixel Transition",
3+
"githubHandle": "rajatrsrivastav"
4+
}

‎Art/rajatrsrivastav-Pixel-Transition-Animation/styles.css‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
background: #2d3436;
9+
height: 100vh;
10+
display: flex;
11+
justify-content: center;
12+
align-items: center;
13+
overflow: hidden;
14+
}
15+
16+
.pixel-grid {
17+
display: grid;
18+
grid-template-columns: repeat(5, 60px);
19+
grid-template-rows: repeat(5, 60px);
20+
gap: 10px;
21+
}
22+
23+
.pixel {
24+
width: 60px;
25+
height: 60px;
26+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
27+
border-radius: 8px;
28+
animation: pixelWave 3s ease-in-out infinite;
29+
}
30+
31+
.pixel:nth-child(1) { animation-delay: 0s; }
32+
.pixel:nth-child(2) { animation-delay: 0.1s; }
33+
.pixel:nth-child(3) { animation-delay: 0.2s; }
34+
.pixel:nth-child(4) { animation-delay: 0.3s; }
35+
.pixel:nth-child(5) { animation-delay: 0.4s; }
36+
.pixel:nth-child(6) { animation-delay: 0.5s; }
37+
.pixel:nth-child(7) { animation-delay: 0.6s; }
38+
.pixel:nth-child(8) { animation-delay: 0.7s; }
39+
.pixel:nth-child(9) { animation-delay: 0.8s; }
40+
.pixel:nth-child(10) { animation-delay: 0.9s; }
41+
.pixel:nth-child(11) { animation-delay: 1s; }
42+
.pixel:nth-child(12) { animation-delay: 1.1s; }
43+
.pixel:nth-child(13) { animation-delay: 1.2s; }
44+
.pixel:nth-child(14) { animation-delay: 1.3s; }
45+
.pixel:nth-child(15) { animation-delay: 1.4s; }
46+
.pixel:nth-child(16) { animation-delay: 1.5s; }
47+
.pixel:nth-child(17) { animation-delay: 1.6s; }
48+
.pixel:nth-child(18) { animation-delay: 1.7s; }
49+
.pixel:nth-child(19) { animation-delay: 1.8s; }
50+
.pixel:nth-child(20) { animation-delay: 1.9s; }
51+
.pixel:nth-child(21) { animation-delay: 2s; }
52+
.pixel:nth-child(22) { animation-delay: 2.1s; }
53+
.pixel:nth-child(23) { animation-delay: 2.2s; }
54+
.pixel:nth-child(24) { animation-delay: 2.3s; }
55+
.pixel:nth-child(25) { animation-delay: 2.4s; }
56+
57+
@keyframes pixelWave {
58+
0%, 100% {
59+
transform: scale(1) rotate(0deg);
60+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
61+
border-radius: 8px;
62+
}
63+
25% {
64+
transform: scale(0.8) rotate(90deg);
65+
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
66+
border-radius: 50%;
67+
}
68+
50% {
69+
transform: scale(1.2) rotate(180deg);
70+
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
71+
border-radius: 8px;
72+
}
73+
75% {
74+
transform: scale(0.8) rotate(270deg);
75+
background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
76+
border-radius: 50%;
77+
}
78+
}

0 commit comments

Comments
 (0)