adding my animation to the project (#2892)

zero-to-mastery · Dec 11, 2024 · 184d63c · 184d63c
1 parent 677c2b6
commit 184d63c
Show file tree

Hide file tree

Showing 3 changed files with 116 additions and 0 deletions.
diff --git a/Art/anorme-loading/index.html b/Art/anorme-loading/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>Animation Nation challenge</title>
+	<link rel="stylesheet" type="text/css" href="styles.css">
+</head>
+
+<body>
+	<h1> Loading . . . <h1>
+
+	<div class="wrapper">
+		<div id="box-1"></div>
+		<div id="box-2"></div>
+		<div id="box-3"></div>
+	</div>
+
+</body>
+</html>
diff --git a/Art/anorme-loading/meta.json b/Art/anorme-loading/meta.json
@@ -0,0 +1,4 @@
+{
+  "artName": "loading",
+  "githubHandle": "anorme"
+}
diff --git a/Art/anorme-loading/styles.css b/Art/anorme-loading/styles.css
@@ -0,0 +1,92 @@
+:root {
+	--color1: pink;
+	--color2: beige;
+	--color3: lightcyan;
+}
+p {
+	margin: 0px;
+}
+
+h1 {
+	text-align: center;
+	height: 20px;
+	margin: 20px auto;
+	color:lightsteelblue;
+}
+
+.wrapper {
+	display: flex;
+	margin:40px auto ;
+	background-color: lightslategray;
+	position: relative;
+	height: 200px;
+	justify-content: center;
+	align-items: center;
+
+
+}
+
+#box-1, #box-2, #box-3 {
+	width: 100px;
+	height: 100px;
+	margin: 20px auto;
+	line-height:100px;
+	text-align: center;
+	animation-duration: 4s;
+	animation-direction: reverse;
+	animation-iteration-count: infinite;
+
+}
+
+#box-1 {
+	background-color: pink;
+	animation-name: change-color1;	
+}
+
+#box-2 {
+	background-color: beige;
+	animation-name: change-color2;
+
+}
+
+#box-3 {
+	background-color: lightcyan;
+	animation-name: change-color3;
+
+}
+
+@keyframes change-color1 {
+	0% {background-color: var(--color1);
+		transform: scale(1.0);}
+	25% {background-color: var(--color2);
+		transform: scale(1.0);}
+	50% {background-color: var(--color3);
+		transform: scale(1.0);}
+	75% {background-color: var(--color1);
+		transform: scale(1.2);}
+	100% {transform: scale(1.0);}
+}
+
+@keyframes change-color2 {
+	0% {background-color: var(--color2);
+		transform: scale(1.0);}
+	25% {background-color: var(--color3);
+		transform: scale(1.0);}
+	50% {background-color: var(--color1);
+		transform: scale(1.2);}
+	75% {background-color: var(--color2);
+		transform: scale(1.0);}
+	100% {transform: scale(1.0);}
+}
+
+@keyframes change-color3 {
+	0% {background-color: var(--color3);
+		transform: scale(1.0)}
+	25% {background-color: var(--color1);
+		transform: scale(1.2);}
+	50% {background-color: var(--color2);
+		transform: scale(1.0)}
+	75% {background-color: var(--color3);
+		transform: scale(1.0)}
+	100% {transform: scale(1.0)}
+}