60 lines
1.5 KiB
CSS
60 lines
1.5 KiB
CSS
|
/* ╭───────────────────────────────────────────────────────╮
|
||
|
|
/ │ _ _ _ │
|
||
|
|
/ │ __ _ _ __ (_)_ __ ___ __ _| |_(_) ___ _ __ ___ │
|
||
|
|
/ │ / _` | '_ \| | '_ ` _ \ / _` | __| |/ _ \| '_ \/ __| │
|
||
|
|
/ │ | (_| | | | | | | | | | | (_| | |_| | (_) | | | \__ \ │
|
||
|
|
/ │ \__,_|_| |_|_|_| |_| |_|\__,_|\__|_|\___/|_| |_|___/ │
|
||
|
|
/ ╰───────────────────────────────────────────────────────╯
|
||
|
|
/ animations - reusable css animations */
|
||
|
|
|
||
|
|
@keyframes window-appear {
|
||
|
|
0% {
|
||
|
|
opacity: 0;
|
||
|
|
transform: scale(0.5, 0.5);
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
opacity: 1;
|
||
|
|
transform: scale(1, 1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes rainbow {
|
||
|
|
0% {
|
||
|
|
filter: hue-rotate(0deg) contrast(150%) saturate(150%);
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
filter: hue-rotate(360deg) contrast(150%) saturate(150%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes bg-gradient {
|
||
|
|
0% {
|
||
|
|
background-position: 0% 27%
|
||
|
|
}
|
||
|
|
|
||
|
|
50% {
|
||
|
|
background-position: 100% 74%
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
background-position: 0% 27%
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@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% }
|
||
|
|
}
|