From 775fed282b3f1a80525afb270e18a6db848d81aa Mon Sep 17 00:00:00 2001
From: SilvijaZ <153712118+SilvijaZ@users.noreply.github.com>
Date: Mon, 12 Feb 2024 22:23:08 +0200
Subject: [PATCH] animation commit

---
 index.html |  4 ++-
 style.css  | 94 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 97 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 9151b34..16a9925 100644
--- a/index.html
+++ b/index.html
@@ -42,7 +42,9 @@
             <button class="btn btn-stadium btn-small">Click me</button>
         </div>
     </section>
-
+    <br><br>
     
+    <div class="toggle-switch"></div>
+    <div class="circle"></div>
 </body>
 </html>
\ No newline at end of file
diff --git a/style.css b/style.css
index ecfa537..9cba70d 100644
--- a/style.css
+++ b/style.css
@@ -120,4 +120,98 @@ body{
 }
 .btn.btn-stadium {
     border-radius: 1.5em;
+}
+
+
+.toggle-switch{
+    display: flex;
+    align-items: center;
+    background: linear-gradient(to right, #1560bd, #e600ee);
+    border-radius: 40px;
+    height: 60px;
+    width: 120px;
+    transition: 1s;
+    transform: translate(50%, 50%);
+    animation-direction: alternate;
+}
+
+.toggle-switch::before{
+    content: '';
+    width: 40px;
+    height: 40px;
+    display: block;
+    animation-direction: alternate;
+    border: none;
+    background-color: #ffffff;
+    border-radius: 50%;
+    animation-name: switch;
+    animation-duration: 0.9s;
+    animation-iteration-count: infinite;
+  }
+
+  .toggle-switch:hover::before{
+    animation-play-state: paused;
+}
+
+  @keyframes switch {
+    0%{
+        margin-left: 1em;
+        background-color: #c602fd;
+    }
+    100%{
+        margin-left: 4em;
+        background-color: #5910f5;
+    }
+}
+
+.circle{
+    margin-left: 30%;
+    background-color: black;
+    width: 80px;
+    height: 150px;
+    font-size: 18px;
+    border: 0.25em solid white;
+    border-radius: 1em;
+    transition: all 1s;
+}
+
+.circle::before{
+    content: '';
+    background-color: #fff;
+    display: block;
+    width: 40px;
+    height: 40px;
+    margin-left: calc(50% - 20px);
+    margin-top: 0.6em;
+    border-radius: 20%;
+    animation-name: scroll;
+    animation-duration: 0.9s;
+    animation-iteration-count: infinite;
+}
+
+.circle::after{
+    content: '';
+    background-color: #fff;
+    display: block;
+    width: 40px;
+    height: 40px;
+    margin-left: calc(50% - 20px);
+    margin-top: 0.3em;
+    border-radius: 20%;
+    animation-name: scroll;
+    animation-duration: 0.9s;
+    animation-iteration-count: infinite;
+}
+
+.circle:hover::before{
+    animation-play-state: paused;
+}
+
+@keyframes scroll {
+    0%{
+        margin-top: 0.6em;
+    }
+    100%{
+        margin-top: 1.5em;
+    }
 }
\ No newline at end of file