96 lines
1.4 KiB
CSS
96 lines
1.4 KiB
CSS
@keyframes name-fade {
|
|
from {
|
|
color: white;
|
|
} 50% {
|
|
color: #66c2ff;
|
|
} to {
|
|
color: white;
|
|
}
|
|
}
|
|
|
|
@keyframes name-color {
|
|
from {
|
|
color: white;
|
|
} to {
|
|
color: #66c2ff;
|
|
}
|
|
}
|
|
|
|
/* This is a animation from codepen, you can find it here
|
|
Link: https://codepen.io/jayhollywood/pen/JWPPZp
|
|
*/
|
|
@keyframes mouse-wheel {
|
|
0% {
|
|
transform: translateY(0);
|
|
opacity: 0;
|
|
}
|
|
10% {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
30% {
|
|
transform: translateY(0);
|
|
height: 4px;
|
|
}
|
|
50% {
|
|
transform: translateY(0);
|
|
height: 20px;
|
|
}
|
|
70% {
|
|
transform: translateY(15px);
|
|
height: 4px;
|
|
opacity: 1;
|
|
}
|
|
90% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
transform: translateY(15px);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
/* Servers */
|
|
|
|
@keyframes online {
|
|
0% {
|
|
color: #ffff99;
|
|
} 20% {
|
|
color: #66ff66;
|
|
} 30% {
|
|
color: #ffff99;
|
|
} 35% {
|
|
color: #66ff66;
|
|
} 37% {
|
|
color: #ffff99;
|
|
} 40% {
|
|
color: #66ff66;
|
|
} 50% {
|
|
color: #ffff99;
|
|
} 52% {
|
|
color: #66ff66;
|
|
} 55% {
|
|
color: #ffff99;
|
|
} 60% {
|
|
color: #66ff66;
|
|
} 65% {
|
|
color: #ffff99;
|
|
} 67% {
|
|
color: #66ff66;
|
|
} 85% {
|
|
color: #ffff99;
|
|
} 87% {
|
|
color: #66ff66;
|
|
} 90% {
|
|
color: #ffff99;
|
|
} 93% {
|
|
color: #66ff66;
|
|
} 95% {
|
|
color: #ffff99;
|
|
} 97% {
|
|
color: #66ff66;
|
|
} 100% {
|
|
color: #66ff66;
|
|
}
|
|
}
|