Faster, synced chevron animation

This commit is contained in:
natsoni 2024-07-09 18:48:58 +09:00
parent 53da6549e2
commit 58f3169712
No known key found for this signature in database
GPG Key ID: C65917583181743B

View File

@ -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;
}
}