better attention flash
All checks were successful
/ build (push) Successful in 4m31s

This commit is contained in:
Ruben 2025-10-28 14:28:31 -05:00
commit 66476b440c
Signed by: sneexy
GPG key ID: 8ECFA045E63BC583
2 changed files with 9 additions and 46 deletions

View file

@ -7,54 +7,17 @@
/
/ animations - reusable css animations */
@keyframes rainbow {
0% {
filter: hue-rotate(0deg) contrast(150%) saturate(150%);
}
100% {
filter: hue-rotate(360deg) contrast(150%) saturate(150%);
}
}
@keyframes bg-move {
0% {
background-position:0 0
}
to {
background-position:-960px -960px
}
0% { background-position: 0 0; }
to { background-position: -960px -960px; }
}
@keyframes opacity-blink {
0% { opacity: 0% }
5% { opacity: 100% }
45% { opacity: 100% }
50% { opacity: 0% }
100% { opacity: 0% }
}
@keyframes opacity-blink-reverse {
0% { opacity: 100% }
5% { opacity: 0% }
45% { opacity: 0% }
50% { opacity: 100% }
100% { opacity: 100% }
}
@keyframes outline-blink {
@keyframes outline-flash {
0% { outline-width: 0rem; }
50% { outline-width: .45rem; }
100% { outline-width: 0rem; }
to { outline-width: .5rem; outline-color: transparent; }
}
@keyframes ticker {
0% {
transform: translate3d(0, 0, 0);
visibility: visible;
}
100% {
transform: translate3d(-100%, 0, 0);
}
0% { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-100%, 0, 0); }
}

View file

@ -26,14 +26,14 @@
&::after {
background: var(--accent);
border-radius: 100%;
bottom: -.2rem;
bottom: -.25rem;
content: "";
height: 1rem;
outline: .13rem solid color-mix(in srgb,var(--accent)60%,transparent);
outline: solid var(--accent);
position: absolute;
right: -.3rem;
width: 1rem;
animation: outline-blink ease-in-out 1s infinite;
animation: outline-flash ease-out 1s infinite;
}
}