60 lines
No EOL
1.6 KiB
CSS
60 lines
No EOL
1.6 KiB
CSS
/* ╭───────────────────────────────────────────────────────╮
|
|
/ │ _ _ _ │
|
|
/ │ __ _ _ __ (_)_ __ ___ __ _| |_(_) ___ _ __ ___ │
|
|
/ │ / _` | '_ \| | '_ ` _ \ / _` | __| |/ _ \| '_ \/ __| │
|
|
/ │ | (_| | | | | | | | | | | (_| | |_| | (_) | | | \__ \ │
|
|
/ │ \__,_|_| |_|_|_| |_| |_|\__,_|\__|_|\___/|_| |_|___/ │
|
|
/ ╰───────────────────────────────────────────────────────╯
|
|
/ 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
|
|
}
|
|
}
|
|
|
|
@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 {
|
|
0% { outline-width: 0rem; }
|
|
50% { outline-width: .45rem; }
|
|
100% { outline-width: 0rem; }
|
|
}
|
|
|
|
@keyframes ticker {
|
|
0% {
|
|
transform: translate3d(0, 0, 0);
|
|
visibility: visible;
|
|
}
|
|
|
|
100% {
|
|
transform: translate3d(-100%, 0, 0);
|
|
}
|
|
} |