Skip to content

Commit 4a40d88

Browse files
shubham0730shubham0730
authored
Add files via upload
1 parent d90f368 commit 4a40d88

8 files changed

Lines changed: 181 additions & 0 deletions

File tree

‎Css Animations/Photo Gallery/images/pexels-photo-1586298.jpeg‎

89.5 KB
Loading

‎Css Animations/Photo Gallery/images/pexels-photo-2335126.jpeg‎

31.8 KB
Loading

‎Css Animations/Photo Gallery/images/pexels-photo-247431.jpeg‎

37.4 KB
Loading

‎Css Animations/Photo Gallery/images/pexels-photo-2754200.jpeg‎

47.6 KB
Loading

‎Css Animations/Photo Gallery/images/pexels-photo-3617500.webp‎

35.9 KB
Loading

‎Css Animations/Photo Gallery/images/pexels-photo-417074.jpeg‎

37.3 KB
Loading

‎Css Animations/Photo Gallery/index.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Animated Photo gallery</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body>
11+
<h1>Animated Image gallery</h1>
12+
<div class="gallery">
13+
<img src="images/pexels-photo-1586298.jpeg" alt="">
14+
<img src="images/pexels-photo-2335126.jpeg" alt="">
15+
<img src="images/pexels-photo-247431.jpeg" alt="">
16+
<img src="images/pexels-photo-2754200.jpeg" alt="">
17+
<img src="images/pexels-photo-3617500.webp" alt="">
18+
<img src="images/pexels-photo-417074.jpeg" alt="">
19+
20+
</div>
21+
22+
</body>
23+
</html>

‎Css Animations/Photo Gallery/style.css‎

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
body{
2+
background: #eee;
3+
background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRDu_8Ryy3R9gfH_qlxi0-Z2IxMQneA5erbxw&usqp=CAU);
4+
}
5+
6+
h1{
7+
justify-content: center;
8+
align-items: center;
9+
text-align: center;
10+
}
11+
12+
.gallery{
13+
--size: min(100vmin,550px);
14+
position: absolute;
15+
left: 50%;
16+
bottom: 50%;
17+
transform:translate(-50%, 50%);
18+
box-shadow:
19+
0 0 16px #0002,
20+
0 20px 40px -20px #0004;
21+
width: var(--size);
22+
height: var(--size);
23+
background: #fff;
24+
border: 6px solid #fff;
25+
display: grid;
26+
grid-template-rows: 50% 50%;
27+
grid-template-columns: 1fr 1fr;
28+
overflow: hidden;
29+
gap: 6px;
30+
justify-content: center;
31+
align-items: center;
32+
}
33+
.gallery img{
34+
width: 100%;
35+
height: 100%;
36+
object-fit: cover;
37+
}
38+
39+
@keyframes moveHorizontal {
40+
to{
41+
object-position: 100% 0;
42+
}
43+
}
44+
@keyframes moveVertical {
45+
to{
46+
object-position: 0 100%;
47+
}
48+
}
49+
@keyframes shrinkVertical {
50+
to{
51+
height:0;
52+
}
53+
}
54+
@keyframes shrinkHorizontal {
55+
to{
56+
width: 0;
57+
}
58+
}
59+
60+
@keyframes growHorizontal {
61+
to{
62+
width: 100%;
63+
}
64+
}
65+
@keyframes growHorizontal2 {
66+
to{
67+
width: 70%;
68+
}
69+
}
70+
@keyframes growVertical {
71+
to{
72+
height: 100%;
73+
}
74+
}
75+
@keyframes growAll {
76+
to{
77+
width: 100%;
78+
height: 100%;
79+
}
80+
}
81+
82+
.gallery img:nth-child(1){
83+
grid-column: 1;
84+
grid-row: 1;
85+
justify-self: end;
86+
animation:
87+
moveHorizontal 8.5s 0.5s 1,
88+
shrinkHorizontal 2s 9s ease-in 1 ;
89+
animation-fill-mode: forwards;
90+
}
91+
.gallery img:nth-child(2){
92+
grid-row: 2;
93+
grid-column: 1;
94+
justify-self: end;
95+
animation:
96+
shrinkHorizontal 2s 11s 1;
97+
animation-fill-mode: forwards;
98+
}
99+
.gallery img:nth-child(3){
100+
grid-column: 2;
101+
grid-row: 1/3;
102+
align-self: end;
103+
object-position: 0 0;
104+
animation:
105+
moveVertical 5s 1s 1,
106+
shrinkVertical 3s 5s 1;
107+
animation-fill-mode: forwards;
108+
}
109+
110+
.gallery img:nth-child(4){
111+
grid-column: 1/3;
112+
grid-row: 1;
113+
width: 0;
114+
justify-content: center;
115+
align-self: flex-start;
116+
animation:
117+
growHorizontal 2.25s 11s 1,
118+
moveHorizontal 4s 14s 1,
119+
shrinkHorizontal 2s 18s 1;
120+
animation-fill-mode: forwards;
121+
}
122+
.gallery img:nth-child(5){
123+
grid-column: 1;
124+
grid-row: 2;
125+
width: 0;
126+
justify-self: start;
127+
align-self: end;
128+
animation:
129+
growHorizontal 2.5s 7.5s 1,
130+
moveVertical 4s 12.5s 1,
131+
shrinkHorizontal 2s 17s 1;
132+
animation-fill-mode: forwards;
133+
}
134+
135+
.gallery img:nth-child(6){
136+
grid-column: 2;
137+
grid-row: 2;
138+
width: 0;
139+
justify-self: end;
140+
align-self: end;
141+
animation:
142+
growHorizontal 2s 8s 1,
143+
shrinkHorizontal 2s 17s 1;
144+
animation-fill-mode: forwards;
145+
}
146+
.gallery img:nth-child(7){
147+
grid-column: 1/3;
148+
grid-row: 1/3;
149+
width: 0;
150+
justify-self: end;
151+
align-self: end;
152+
animation:
153+
growHorizontal 2s 20s 1,
154+
movevertical 16s 21.5s 1;
155+
animation-fill-mode: forwards;
156+
}
157+
158+

0 commit comments

Comments
 (0)