Skip to content

Commit 9c249cb

Browse files
purna135purna135
committed
Add Newton's Cradle Animation using CSS
1 parent ae3697a commit 9c249cb

3 files changed

Lines changed: 135 additions & 0 deletions

File tree

‎Css Animations/Newton's Cradle/Newton's Cradle Animation.gif‎

202 KB
Loading

‎Css Animations/Newton's Cradle/index.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>Newton&#39;s Cradle Animarion</title>
7+
<link rel="stylesheet" href="./style.css">
8+
9+
</head>
10+
11+
<body>
12+
<div class="container">
13+
<div class="upperpart">
14+
<div class="first">
15+
<div class="line"></div>
16+
<div class="ball"></div>
17+
</div>
18+
<div class="second">
19+
<div class="line"></div>
20+
<div class="ball"></div>
21+
</div>
22+
<div class="third">
23+
<div class="line"></div>
24+
<div class="ball"></div>
25+
</div>
26+
<div class="fourth">
27+
<div class="line"></div>
28+
<div class="ball"></div>
29+
</div>
30+
<div class="fifth">
31+
<div class="line"></div>
32+
<div class="ball"></div>
33+
</div>
34+
</div>
35+
</div>
36+
37+
</body>
38+
39+
</html>

‎Css Animations/Newton's Cradle/style.css‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
body {
2+
background: #191919;
3+
}
4+
5+
.container {
6+
border: 1px solid white;
7+
width: 700px;
8+
height: 600px;
9+
border-radius: 100% 100% 0 0;
10+
margin: auto;
11+
}
12+
13+
.upperpart {
14+
width: 250px;
15+
height: 400px;
16+
border-top: 6px solid white;
17+
margin: auto;
18+
margin-top: 30%;
19+
}
20+
21+
.line {
22+
width: 3px;
23+
height: 200px;
24+
background: #fff;
25+
margin: auto;
26+
}
27+
28+
.ball {
29+
width: 50px;
30+
height: 50px;
31+
background: #fff;
32+
border-radius: 100%;
33+
}
34+
35+
.first,
36+
.second,
37+
.third,
38+
.fourth,
39+
.fifth {
40+
width: 50px;
41+
height: 250px;
42+
float: left;
43+
}
44+
45+
.first {
46+
-webkit-animation: move 3s linear infinite;
47+
}
48+
49+
.fifth {
50+
-webkit-animation: moveback 3s linear infinite;
51+
}
52+
53+
@-webkit-keyframes move {
54+
0% {
55+
transform: rotate(45deg);
56+
transform-origin: top;
57+
}
58+
25% {
59+
transform: rotate(0deg);
60+
transform-origin: top;
61+
}
62+
50% {
63+
transform: rotate(0deg);
64+
transform-origin: top;
65+
}
66+
75% {
67+
transform: rotate(0deg);
68+
transform-origin: top;
69+
}
70+
100% {
71+
transform: rotate(45deg);
72+
transform-origin: top;
73+
}
74+
}
75+
@-webkit-keyframes moveback {
76+
0% {
77+
transform: rotate(0deg);
78+
transform-origin: top;
79+
}
80+
25% {
81+
transform: rotate(0deg);
82+
transform-origin: top;
83+
}
84+
50% {
85+
transform: rotate(-45deg);
86+
transform-origin: top;
87+
}
88+
75% {
89+
transform: rotate(0deg);
90+
transform-origin: top;
91+
}
92+
100% {
93+
transform: rotate(0deg);
94+
transform-origin: top;
95+
}
96+
}

0 commit comments

Comments
 (0)