animate scroll indicator

main.py

@@ -57,11 +57,7 @@ async def index_page(client: Client):
             title('Meet the *NiceGUI*.')
             subtitle('And let any browser be the frontend of your Python code.') \
                 .classes('max-w-[20rem] sm:max-w-[24rem] md:max-w-[30rem]')
-            with ui.link(target='#about') \
-                    .classes('column mt-6 items-center ml-[-12px] hover:translate-y-1 duration-100 ease-out'):
-                ui.icon('keyboard_arrow_down').classes('text-4xl text-grey-5 mb-[-0.95em]')
-                ui.icon('keyboard_arrow_down').classes('text-6xl text-black')
-                ui.icon('keyboard_arrow_down').classes('text-4xl text-grey-5 mt-[-0.85em]')
+            ui.link(target='#about').classes('scroll-indicator')
 
     with ui.row().classes('''
             dark-box min-h-screen no-wrap

website/static/style.css

@@ -47,6 +47,43 @@ a:active:not(.browser-window *) {
   backdrop-filter: blur(5px);
 }
 
+.scroll-indicator:after {
+  content: "";
+  display: block;
+  width: 24px;
+  height: 24px;
+  margin: 8px;
+  border-left: 3px solid #444;
+  border-bottom: 3px solid #444;
+  -webkit-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+  -webkit-animation: sdb04 2s infinite;
+  animation: sdb04 1.5s infinite;
+  transition-timing-function: ease;
+}
+@-webkit-keyframes sdb04 {
+  0% {
+    -webkit-transform: rotate(-45deg) translate(0, 0);
+  }
+  15% {
+    -webkit-transform: rotate(-45deg) translate(-10px, 10px);
+  }
+  30% {
+    -webkit-transform: rotate(-45deg) translate(0, 0);
+  }
+}
+@keyframes sdb04 {
+  0% {
+    transform: rotate(-45deg) translate(0, 0);
+  }
+  15% {
+    transform: rotate(-45deg) translate(-10px, 10px);
+  }
+  30% {
+    transform: rotate(-45deg) translate(0, 0);
+  }
+}
+
 dl.field-list {
   display: grid;
   font-size: 85%;