Skip to content

Commit 7a3aaba

Browse files
shenmareparasshenmareparas
committed
Added Book Animation
1 parent 9a7ac8e commit 7a3aaba

File tree

2 files changed

+293
-0
lines changed

2 files changed

+293
-0
lines changed

‎Book Animation/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+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>Book Animation</title>
7+
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
8+
<link rel="stylesheet" href="./style.css">
9+
10+
</head>
11+
12+
<body>
13+
<div class="book">
14+
<div class="book__pg-shadow"></div>
15+
<div class="book__pg"></div>
16+
<div class="book__pg book__pg--2"></div>
17+
<div class="book__pg book__pg--3"></div>
18+
<div class="book__pg book__pg--4"></div>
19+
<div class="book__pg book__pg--5"></div>
20+
</div>
21+
</body>
22+
23+
</html>

‎Book Animation/style.css‎

Lines changed: 270 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,270 @@
1+
* {
2+
border: 0;
3+
box-sizing: border-box;
4+
margin: 0;
5+
padding: 0;
6+
}
7+
:root {
8+
--hue: 223;
9+
--bg: hsl(var(--hue),10%,90%);
10+
--fg: hsl(var(--hue),10%,10%);
11+
--primary: hsl(var(--hue),90%,55%);
12+
--primary-l: hsl(var(--hue),90%,65%);
13+
--primary-d: hsl(var(--hue),90%,45%);
14+
--white: hsl(var(--hue),10%,100%);
15+
--white-d: hsl(var(--hue),10%,45%);
16+
font-size: calc(16px + (24 - 16) * (100vw - 320px) / (1280 - 320));
17+
}
18+
body {
19+
background-color: var(--bg);
20+
color: var(--fg);
21+
font: 1em/1.5 sans-serif;
22+
height: 100vh;
23+
display: grid;
24+
place-items: center;
25+
}
26+
.book,
27+
.book__pg-shadow,
28+
.book__pg {
29+
animation: cover 7s ease-in-out infinite;
30+
}
31+
.book {
32+
background-color: var(--primary-l);
33+
border-radius: 0.25em;
34+
box-shadow:
35+
0 0.25em 0.5em hsla(0,0%,0%,0.3),
36+
0 0 0 0.25em var(--primary) inset;
37+
padding: 0.25em;
38+
perspective: 37.5em;
39+
position: relative;
40+
width: 8em;
41+
height: 6em;
42+
transform: translate3d(0,0,0);
43+
transform-style: preserve-3d;
44+
}
45+
.book__pg-shadow,
46+
.book__pg {
47+
position: absolute;
48+
left: 0.25em;
49+
width: calc(50% - 0.25em);
50+
}
51+
.book__pg-shadow {
52+
animation-name: shadow;
53+
background-image: linear-gradient(-45deg,hsla(0,0%,0%,0) 50%,hsla(0,0%,0%,0.3) 50%);
54+
filter: blur(0.25em);
55+
top: calc(100% - 0.25em);
56+
height: 3.75em;
57+
transform: scaleY(0);
58+
transform-origin: 100% 0%;
59+
}
60+
.book__pg {
61+
animation-name: pg1;
62+
background-color: var(--white);
63+
background-image: linear-gradient(90deg,hsla(var(--hue),10%,90%,0) 87.5%,hsl(var(--hue),10%,90%));
64+
height: calc(100% - 0.5em);
65+
transform-origin: 100% 50%;
66+
}
67+
.book__pg--2,
68+
.book__pg--3,
69+
.book__pg--4 {
70+
background-image:
71+
repeating-linear-gradient(hsl(var(--hue),10%,10%) 0 0.125em,hsla(var(--hue),10%,10%,0) 0.125em 0.5em),
72+
linear-gradient(90deg,hsla(var(--hue),10%,90%,0) 87.5%,hsl(var(--hue),10%,90%));
73+
background-repeat: no-repeat;
74+
background-position: center;
75+
background-size: 2.5em 4.125em, 100% 100%;
76+
}
77+
.book__pg--2 {
78+
animation-name: pg2;
79+
}
80+
.book__pg--3 {
81+
animation-name: pg3;
82+
}
83+
.book__pg--4 {
84+
animation-name: pg4;
85+
}
86+
.book__pg--5 {
87+
animation-name: pg5;
88+
}
89+
90+
/* Dark theme */
91+
@media (prefers-color-scheme: dark) {
92+
:root {
93+
--bg: hsl(var(--hue),10%,30%);
94+
--fg: hsl(var(--hue),10%,90%);
95+
}
96+
}
97+
98+
/* Animations */
99+
@keyframes cover {
100+
from, 5%, 45%, 55%, 95%, to {
101+
animation-timing-function: ease-out;
102+
background-color: var(--primary-l);
103+
}
104+
10%, 40%, 60%, 90% {
105+
animation-timing-function: ease-in;
106+
background-color: var(--primary-d);
107+
}
108+
}
109+
@keyframes shadow {
110+
from, 10.01%, 20.01%, 30.01%, 40.01% {
111+
animation-timing-function: ease-in;
112+
transform: translate3d(0,0,1px) scaleY(0) rotateY(0);
113+
}
114+
5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 85%, 95% {
115+
animation-timing-function: ease-out;
116+
transform: translate3d(0,0,1px) scaleY(0.2) rotateY(90deg);
117+
}
118+
10%, 20%, 30%, 40%, 50%, to {
119+
animation-timing-function: ease-out;
120+
transform: translate3d(0,0,1px) scaleY(0) rotateY(180deg);
121+
}
122+
50.01%, 60.01%, 70.01%, 80.01%, 90.01% {
123+
animation-timing-function: ease-in;
124+
transform: translate3d(0,0,1px) scaleY(0) rotateY(180deg);
125+
}
126+
60%, 70%, 80%, 90%, to {
127+
animation-timing-function: ease-out;
128+
transform: translate3d(0,0,1px) scaleY(0) rotateY(0);
129+
}
130+
}
131+
@keyframes pg1 {
132+
from, to {
133+
animation-timing-function: ease-in-out;
134+
background-color: var(--white);
135+
transform: translate3d(0,0,1px) rotateY(0.4deg);
136+
}
137+
10%, 15% {
138+
animation-timing-function: ease-out;
139+
background-color: var(--white);
140+
transform: translate3d(0,0,1px) rotateY(180deg);
141+
}
142+
20%, 80% {
143+
animation-timing-function: ease-in;
144+
background-color: var(--white-d);
145+
transform: translate3d(0,0,1px) rotateY(180deg);
146+
}
147+
85%, 90% {
148+
animation-timing-function: ease-in-out;
149+
background-color: var(--white);
150+
transform: translate3d(0,0,1px) rotateY(180deg);
151+
}
152+
}
153+
@keyframes pg2 {
154+
from, to {
155+
animation-timing-function: ease-in;
156+
background-color: var(--white-d);
157+
transform: translate3d(0,0,1px) rotateY(0.3deg);
158+
}
159+
5%, 10% {
160+
animation-timing-function: ease-in-out;
161+
background-color: var(--white);
162+
transform: translate3d(0,0,1px) rotateY(0.3deg);
163+
}
164+
20%, 25% {
165+
animation-timing-function: ease-out;
166+
background-color: var(--white);
167+
transform: translate3d(0,0,1px) rotateY(179.9deg);
168+
}
169+
30%, 70% {
170+
animation-timing-function: ease-in;
171+
background-color: var(--white-d);
172+
transform: translate3d(0,0,1px) rotateY(179.9deg);
173+
}
174+
75%, 80% {
175+
animation-timing-function: ease-in-out;
176+
background-color: var(--white);
177+
transform: translate3d(0,0,1px) rotateY(179.9deg);
178+
}
179+
90%, 95% {
180+
animation-timing-function: ease-out;
181+
background-color: var(--white);
182+
transform: translate3d(0,0,1px) rotateY(0.3deg);
183+
}
184+
}
185+
@keyframes pg3 {
186+
from, 10%, 90%, to {
187+
animation-timing-function: ease-in;
188+
background-color: var(--white-d);
189+
transform: translate3d(0,0,1px) rotateY(0.2deg);
190+
}
191+
15%, 20% {
192+
animation-timing-function: ease-in-out;
193+
background-color: var(--white);
194+
transform: translate3d(0,0,1px) rotateY(0.2deg);
195+
}
196+
30%, 35% {
197+
animation-timing-function: ease-out;
198+
background-color: var(--white);
199+
transform: translate3d(0,0,1px) rotateY(179.8deg);
200+
}
201+
40%, 60% {
202+
animation-timing-function: ease-in;
203+
background-color: var(--white-d);
204+
transform: translate3d(0,0,1px) rotateY(179.8deg);
205+
}
206+
65%, 70% {
207+
animation-timing-function: ease-in-out;
208+
background-color: var(--white);
209+
transform: translate3d(0,0,1px) rotateY(179.8deg);
210+
}
211+
80%, 85% {
212+
animation-timing-function: ease-out;
213+
background-color: var(--white);
214+
transform: translate3d(0,0,1px) rotateY(0.2deg);
215+
}
216+
}
217+
@keyframes pg4 {
218+
from, 20%, 80%, to {
219+
animation-timing-function: ease-in;
220+
background-color: var(--white-d);
221+
transform: translate3d(0,0,1px) rotateY(0.1deg);
222+
}
223+
25%, 30% {
224+
animation-timing-function: ease-in-out;
225+
background-color: var(--white);
226+
transform: translate3d(0,0,1px) rotateY(0.1deg);
227+
}
228+
40%, 45% {
229+
animation-timing-function: ease-out;
230+
background-color: var(--white);
231+
transform: translate3d(0,0,1px) rotateY(179.7deg);
232+
}
233+
50% {
234+
animation-timing-function: ease-in;
235+
background-color: var(--white-d);
236+
transform: translate3d(0,0,1px) rotateY(179.7deg);
237+
}
238+
55%, 60% {
239+
animation-timing-function: ease-in-out;
240+
background-color: var(--white);
241+
transform: translate3d(0,0,1px) rotateY(179.7deg);
242+
}
243+
70%, 75% {
244+
animation-timing-function: ease-out;
245+
background-color: var(--white);
246+
transform: translate3d(0,0,1px) rotateY(0.1deg);
247+
}
248+
}
249+
@keyframes pg5 {
250+
from, 30%, 70%, to {
251+
animation-timing-function: ease-in;
252+
background-color: var(--white-d);
253+
transform: translate3d(0,0,1px) rotateY(0);
254+
}
255+
35%, 40% {
256+
animation-timing-function: ease-in-out;
257+
background-color: var(--white);
258+
transform: translate3d(0,0,1px) rotateY(0deg);
259+
}
260+
50% {
261+
animation-timing-function: ease-in-out;
262+
background-color: var(--white);
263+
transform: translate3d(0,0,1px) rotateY(179.6deg);
264+
}
265+
60%, 65% {
266+
animation-timing-function: ease-out;
267+
background-color: var(--white);
268+
transform: translate3d(0,0,1px) rotateY(0);
269+
}
270+
}

0 commit comments

Comments
 (0)