From 58f316971215db95213d8153f39724d8a61fd6c4 Mon Sep 17 00:00:00 2001 From: natsoni Date: Tue, 9 Jul 2024 18:48:58 +0900 Subject: [PATCH] Faster, synced chevron animation --- .../acceleration-timeline.component.scss | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss b/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss index c784b7c6d..e2138483c 100644 --- a/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss +++ b/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss @@ -113,18 +113,18 @@ border-radius: 5px; &.go-faster { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10'%3E%3Cpath style='fill:%23653b9c;' d='M 0,0 5,5 0,10 Z'/%3E%3Cpath style='fill:%239339f4;' d='M 0,0 10,0 15,5 10,10 0,10 5,5 Z'/%3E%3Cpath style='fill:%23653b9c;' d='M 10,0 20,0 20,10 10,10 15,5 Z'/%3E%3C/svg%3E%0A"); background-size: 20px 10px; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10'%3E%3Cpath style='fill:%239339f4;' d='M 0,0 5,5 0,10 Z'/%3E%3Cpath style='fill:%23653b9c;' d='M 0,0 10,0 15,5 10,10 0,10 5,5 Z'/%3E%3Cpath style='fill:%239339f4;' d='M 10,0 20,0 20,10 10,10 15,5 Z'/%3E%3C/svg%3E%0A"); background-size: 20px 10px; border-radius: 0; &.right { left: calc(50% + 5px); margin-right: calc(-4em + 5px); - animation: goFasterRight 1s infinite linear; + animation: goFasterRight 0.8s infinite linear; } &.left { right: calc(50% + 5px); margin-left: calc(-4em + 5px); - animation: goFasterLeft 1s infinite linear; + animation: goFasterLeft 0.8s infinite linear; } } @@ -143,7 +143,7 @@ left: -5px; top: -73px; transform: translateX(120%); - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='20'%3E%3Cpath style='fill:%23653b9c;' d='M 0,20 5,15 10,20 Z'/%3E%3Cpath style='fill:%239339f4;' d='M 0,20 5,15 10,20 10,10 5,5 0,10 Z'/%3E%3Cpath style='fill:%23653b9c;' d='M 0,10 5,5 10,10 10,0 0,0 Z'/%3E%3C/svg%3E%0A"); // linear-gradient(135deg, var(--tertiary) 34%, transparent 34%), + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='20'%3E%3Cpath style='fill:%239339f4;' d='M 0,20 5,15 10,20 Z'/%3E%3Cpath style='fill:%23653b9c;' d='M 0,20 5,15 10,20 10,10 5,5 0,10 Z'/%3E%3Cpath style='fill:%239339f4;' d='M 0,10 5,5 10,10 10,0 0,0 Z'/%3E%3C/svg%3E%0A"); // linear-gradient(135deg, var(--tertiary) 34%, transparent 34%), background-size: 10px 20px; &.down { @@ -155,7 +155,7 @@ } &.loading { - animation: goFasterUp 1s infinite linear; + animation: goFasterUp 0.8s infinite linear; } } } @@ -180,7 +180,7 @@ border-radius: 50%; background: white; &.accelerating { - animation: acceleratePulse 1s infinite; + animation: acceleratePulse 0.4s infinite; } }