99 lines
1.5 KiB
CSS
99 lines
1.5 KiB
CSS
@charset "utf-8";
|
|
|
|
.anm-rotate {
|
|
animation: rotate 1s infinite linear;
|
|
}
|
|
|
|
@keyframes rotate {
|
|
20% {
|
|
transform: rotate(72deg);
|
|
}
|
|
40% {
|
|
transform: rotate(144deg);
|
|
}
|
|
60% {
|
|
transform: rotate(216deg);
|
|
}
|
|
80% {
|
|
transform: rotate(288deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.fade-in {
|
|
/* animation-direction: reverse; */
|
|
animation: fade-in 0.2s 1 linear;
|
|
opacity: 0.5;
|
|
/* padding: 0; */
|
|
transform: translate(0, 0.4rem);
|
|
}
|
|
|
|
@keyframes fade-in {
|
|
0% {
|
|
opacity: 0.5;
|
|
transform: translate(0, 0.4rem);
|
|
/* padding: 0.4rem 0; */
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translate(0, 0);
|
|
/* transform: translate(0, 0.4rem); */
|
|
/* padding: 0; */
|
|
}
|
|
}
|
|
|
|
.notification-resize {
|
|
animation: resize 2s 1 linear;
|
|
/* transform: translate(100%, 0%); */
|
|
}
|
|
|
|
@keyframes resize {
|
|
0% {
|
|
/* transform: translate(0, 0); */
|
|
opacity: 0;
|
|
transform: scale(1, 0);
|
|
}
|
|
5% {
|
|
/* transform: translate(0, 8rem); */
|
|
opacity: 0.8;
|
|
transform: scale(1, 1);
|
|
}
|
|
95% {
|
|
/* transform: translate(0, 8rem); */
|
|
opacity: 0.8;
|
|
transform: scale(1, 1);
|
|
}
|
|
100% {
|
|
/* transform: translate(0, 0rem); */
|
|
opacity: 0;
|
|
transform: scale(1, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes fade {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
|
|
.notification-cool-down {
|
|
animation: cooldown 0.3s 1 linear;
|
|
}
|
|
|
|
@keyframes cooldown {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.opacity-trans {
|
|
transition: opacity 0.15s linear;
|
|
}
|