From 184d63c75cc7429142ba05c8571a62cfc3eb47f4 Mon Sep 17 00:00:00 2001 From: Anorme Date: Wed, 11 Dec 2024 21:13:16 +0000 Subject: [PATCH] adding my animation to the project (#2892) --- Art/anorme-loading/index.html | 20 ++++++++ Art/anorme-loading/meta.json | 4 ++ Art/anorme-loading/styles.css | 92 +++++++++++++++++++++++++++++++++++ 3 files changed, 116 insertions(+) create mode 100644 Art/anorme-loading/index.html create mode 100644 Art/anorme-loading/meta.json create mode 100644 Art/anorme-loading/styles.css diff --git a/Art/anorme-loading/index.html b/Art/anorme-loading/index.html new file mode 100644 index 000000000..dafb6672c --- /dev/null +++ b/Art/anorme-loading/index.html @@ -0,0 +1,20 @@ + + + + + + Animation Nation challenge + + + + +

Loading . . .

+ +
+
+
+
+
+ + + \ No newline at end of file diff --git a/Art/anorme-loading/meta.json b/Art/anorme-loading/meta.json new file mode 100644 index 000000000..a29e9641f --- /dev/null +++ b/Art/anorme-loading/meta.json @@ -0,0 +1,4 @@ +{ + "artName": "loading", + "githubHandle": "anorme" +} \ No newline at end of file diff --git a/Art/anorme-loading/styles.css b/Art/anorme-loading/styles.css new file mode 100644 index 000000000..02ce3a15a --- /dev/null +++ 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)} +}