Skip to content

Commit 1a27119

Browse files
thiziribouazizthiziribouaziz
authored
Thiziri (#2884)
* thiziribouaziz animation * update thiziribouaziz animation * finalUpdate
1 parent 8555584 commit 1a27119

File tree

3 files changed

+150
-0
lines changed

3 files changed

+150
-0
lines changed

‎Art/thiziribouaziz-HachtoberfestAnimation/index.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
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>aniamation nation</title>
7+
<link rel="stylesheet" href="./styles.css">
8+
<link rel="preconnect" href="https://fonts.googleapis.com">
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10+
<link href="https://fonts.googleapis.com/css2?family=Sixtyfour+Convergence:[email protected]&family=Unlock&display=swap" rel="stylesheet">
11+
</head>
12+
<body>
13+
<div class="container">
14+
<h1>HAPPY HACHTOBERFEST</h1>
15+
</div>
16+
17+
</body>
18+
</html>

‎Art/thiziribouaziz-HachtoberfestAnimation/meta.json‎

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

‎Art/thiziribouaziz-HachtoberfestAnimation/styles.css‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
body{
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
position: relative;
6+
display: flex;
7+
justify-content: center;
8+
}
9+
10+
.container{
11+
width: 100%;
12+
height: 100%;
13+
display: flex;
14+
justify-content: center;
15+
text-align: center;
16+
17+
}
18+
19+
20+
body{
21+
-webkit-animation: color-change-2x 2s linear infinite alternate both;
22+
animation: color-change-2x 2s linear infinite alternate both;
23+
}
24+
25+
@-webkit-keyframes body {
26+
0% {
27+
background: #19dcea;
28+
}
29+
100% {
30+
background: #b22cff;
31+
}
32+
}
33+
@keyframes color-change-2x {
34+
0% {
35+
background: #19dcea;
36+
}
37+
100% {
38+
background: #b22cff;
39+
}
40+
}
41+
42+
h1{
43+
padding: 30px;
44+
border-radius: 40px;
45+
background-color: rgba(211, 10, 167, 0);
46+
color: rgb(79, 12, 100);
47+
font-family: "Unlock", serif;
48+
font-size: 50px;
49+
letter-spacing: 10px;
50+
margin-top: 250px;
51+
52+
}
53+
h1 {
54+
-webkit-animation: heartbeat 3s ease-in-out infinite both;
55+
animation: heartbeat 3s ease-in-out infinite both;
56+
}
57+
58+
59+
@-webkit-keyframes heartbeat {
60+
from {
61+
-webkit-transform: scale(1);
62+
transform: scale(1);
63+
-webkit-transform-origin: center center;
64+
transform-origin: center center;
65+
-webkit-animation-timing-function: ease-out;
66+
animation-timing-function: ease-out;
67+
}
68+
10% {
69+
-webkit-transform: scale(0.91);
70+
transform: scale(0.91);
71+
-webkit-animation-timing-function: ease-in;
72+
animation-timing-function: ease-in;
73+
}
74+
17% {
75+
-webkit-transform: scale(0.98);
76+
transform: scale(0.98);
77+
-webkit-animation-timing-function: ease-out;
78+
animation-timing-function: ease-out;
79+
}
80+
33% {
81+
-webkit-transform: scale(0.87);
82+
transform: scale(0.87);
83+
-webkit-animation-timing-function: ease-in;
84+
animation-timing-function: ease-in;
85+
}
86+
45% {
87+
-webkit-transform: scale(1);
88+
transform: scale(1);
89+
-webkit-animation-timing-function: ease-out;
90+
animation-timing-function: ease-out;
91+
}
92+
}
93+
@keyframes heartbeat {
94+
from {
95+
-webkit-transform: scale(1);
96+
transform: scale(1);
97+
-webkit-transform-origin: center center;
98+
transform-origin: center center;
99+
-webkit-animation-timing-function: ease-out;
100+
animation-timing-function: ease-out;
101+
}
102+
10% {
103+
-webkit-transform: scale(0.91);
104+
transform: scale(0.91);
105+
-webkit-animation-timing-function: ease-in;
106+
animation-timing-function: ease-in;
107+
}
108+
17% {
109+
-webkit-transform: scale(0.98);
110+
transform: scale(0.98);
111+
-webkit-animation-timing-function: ease-out;
112+
animation-timing-function: ease-out;
113+
}
114+
33% {
115+
-webkit-transform: scale(0.87);
116+
transform: scale(0.87);
117+
-webkit-animation-timing-function: ease-in;
118+
animation-timing-function: ease-in;
119+
}
120+
45% {
121+
-webkit-transform: scale(1);
122+
transform: scale(1);
123+
-webkit-animation-timing-function: ease-out;
124+
animation-timing-function: ease-out;
125+
}
126+
}
127+
128+

0 commit comments

Comments
 (0)