841 lines
16 KiB
CSS
841 lines
16 KiB
CSS
/* -------------------- keyframes -------------------- */
|
|
|
|
@keyframes spiner {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
25% {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
50% {
|
|
transform: rotate(360deg);
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
75% {}
|
|
|
|
100% {
|
|
transform: rotate(90deg);
|
|
}
|
|
}
|
|
|
|
@keyframes opacity {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
|
|
25% {}
|
|
|
|
50% {
|
|
box-shadow: inset 0px 0px 100px rgba(255, 0, 0, .2);
|
|
opacity: 0.1;
|
|
}
|
|
|
|
75% {}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
0% { opacity: 0;}
|
|
50% { opacity: 0.5;}
|
|
100% { opacity: 1;}
|
|
}
|
|
|
|
@keyframes fadeInOut {
|
|
0% { opacity: 0;}
|
|
50% { opacity: 1;}
|
|
100% { opacity: 0;}
|
|
}
|
|
|
|
@keyframes slide_left {
|
|
0% {
|
|
transform: translate(0px);
|
|
opacity: 0;
|
|
}
|
|
|
|
5% {
|
|
transform: translateX(-235px) translateY(-70px);
|
|
opacity: 1;
|
|
}
|
|
|
|
20% {
|
|
transform: translateX(-235px) translateY(-70px);
|
|
opacity: 1;
|
|
}
|
|
|
|
25% {
|
|
transform: translateX(0px);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(0px);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes slide_right {
|
|
0% {
|
|
transform: translate(0px);
|
|
opacity: 0;
|
|
}
|
|
|
|
5% {
|
|
transform: translateX(230px) translateY(-80px);
|
|
opacity: 1;
|
|
}
|
|
|
|
20% {
|
|
transform: translateX(230px) translateY(-80px);
|
|
opacity: 1;
|
|
}
|
|
|
|
25% {
|
|
transform: translateX(0px);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(0px);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes slide_up {
|
|
0% {
|
|
transform: translate(0px);
|
|
opacity: 0;
|
|
}
|
|
|
|
5% {
|
|
transform: translateX(0px) translateY(-80px);
|
|
opacity: 1;
|
|
}
|
|
|
|
20% {
|
|
transform: translateX(0px) translateY(-80px);
|
|
opacity: 1;
|
|
}
|
|
|
|
25% {
|
|
transform: translateX(0px);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(0px);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes slide_text_up {
|
|
0% {
|
|
transform: translate(0px);
|
|
opacity: 0;
|
|
}
|
|
|
|
5% {
|
|
transform: translateX(0px) translateY(-53px);
|
|
opacity: 1;
|
|
}
|
|
|
|
20% {
|
|
transform: translateX(0px) translateY(-53px);
|
|
opacity: 1;
|
|
}
|
|
|
|
25% {
|
|
transform: translateX(0px);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(0px);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes slide_text_left {
|
|
0% {
|
|
transform: translate(0px);
|
|
opacity: 0;
|
|
}
|
|
|
|
5% {
|
|
transform: translateX(-235px) translateY(-35px);
|
|
opacity: 1;
|
|
}
|
|
|
|
20% {
|
|
transform: translateX(-235px) translateY(-35px);
|
|
opacity: 1;
|
|
}
|
|
|
|
25% {
|
|
transform: translateX(0px);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(0px);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes slide_text_right {
|
|
0% {
|
|
transform: translate(0px);
|
|
opacity: 0;
|
|
}
|
|
|
|
5% {
|
|
transform: translateX(230px) translateY(-35px);
|
|
opacity: 1;
|
|
}
|
|
|
|
20% {
|
|
transform: translateX(230px) translateY(-35px);
|
|
opacity: 1;
|
|
}
|
|
|
|
25% {
|
|
transform: translateX(0px);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(0px);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
|
|
@keyframes slide_right_up {
|
|
0% {
|
|
transform: translate(0px);
|
|
opacity: 0;
|
|
}
|
|
|
|
5% {
|
|
transform: translateX(230px) translateY(-80px);
|
|
opacity: 1;
|
|
}
|
|
|
|
20% {
|
|
transform: translateX(230px) translateY(-80px);
|
|
opacity: 1;
|
|
}
|
|
|
|
25% {
|
|
transform: translateX(0px);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(0px);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes slide_right_middle {
|
|
0% {
|
|
transform: translate(0px);
|
|
opacity: 0;
|
|
}
|
|
|
|
5% {
|
|
transform: translateX(230px) translateY(-15px);
|
|
opacity: 1;
|
|
}
|
|
|
|
20% {
|
|
transform: translateX(230px) translateY(-15px);
|
|
opacity: 1;
|
|
}
|
|
|
|
25% {
|
|
transform: translateX(0px);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(0px);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes slide_right_middle_2 {
|
|
0% {
|
|
transform: translate(0px);
|
|
opacity: 0;
|
|
}
|
|
|
|
74% {
|
|
transform: translate(0px);
|
|
opacity: 0;
|
|
}
|
|
|
|
75% {
|
|
transform: translateX(230px) translateY(-15px);
|
|
opacity: 1;
|
|
color: white;
|
|
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #32CD32, 0 0 35px #32CD32, 0 0 40px #32CD32, 0 0 50px #32CD32, 0 0 75px #32CD32;
|
|
}
|
|
|
|
90% {
|
|
transform: translateX(230px) translateY(-15px);
|
|
opacity: 1;
|
|
color: white;
|
|
text-shadow: 0 0 5px #000, 0 0 10px #000, 0 0 15px #000, 0 0 20px #32CD32, 0 0 35px #32CD32, 0 0 40px #32CD32, 0 0 50px #32CD32, 0 0 75px #32CD32;
|
|
;
|
|
|
|
}
|
|
|
|
95% {
|
|
transform: translateX(0px);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(0px);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes slide_right_bottom {
|
|
0% {
|
|
transform: translate(0px);
|
|
opacity: 0;
|
|
}
|
|
|
|
5% {
|
|
transform: translateX(230px) translateY(50px);
|
|
opacity: 1;
|
|
}
|
|
|
|
20% {
|
|
transform: translateX(230px) translateY(50px);
|
|
opacity: 1;
|
|
}
|
|
|
|
25% {
|
|
transform: translateX(0px);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(0px);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes slide_text_right_top {
|
|
0% {
|
|
transform: translate(0px);
|
|
opacity: 0;
|
|
}
|
|
|
|
5% {
|
|
transform: translateX(230px) translateY(-50px);
|
|
opacity: 1;
|
|
color: white;
|
|
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #32CD32, 0 0 35px #32CD32, 0 0 40px #32CD32, 0 0 50px #32CD32, 0 0 75px #32CD32;
|
|
}
|
|
|
|
20% {
|
|
transform: translateX(230px) translateY(-50px);
|
|
opacity: 1;
|
|
color: white;
|
|
text-shadow: 0 0 5px #000, 0 0 10px #000, 0 0 15px #000, 0 0 20px #32CD32, 0 0 35px #32CD32, 0 0 40px #32CD32, 0 0 50px #32CD32, 0 0 75px #32CD32;
|
|
}
|
|
|
|
25% {
|
|
transform: translateX(0px);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(0px);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes slide_text_right_middle {
|
|
0% {
|
|
transform: translate(0px);
|
|
opacity: 0;
|
|
}
|
|
|
|
5% {
|
|
transform: translateX(230px) translateY(17px);
|
|
opacity: 1;
|
|
color: white;
|
|
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #32CD32, 0 0 35px #32CD32, 0 0 40px #32CD32, 0 0 50px #32CD32, 0 0 75px #32CD32;
|
|
}
|
|
|
|
20% {
|
|
transform: translateX(230px) translateY(17px);
|
|
opacity: 1;
|
|
color: white;
|
|
text-shadow: 0 0 5px #000, 0 0 10px #000, 0 0 15px #000, 0 0 20px #32CD32, 0 0 35px #32CD32, 0 0 40px #32CD32, 0 0 50px #32CD32, 0 0 75px #32CD32;
|
|
;
|
|
|
|
}
|
|
|
|
25% {
|
|
transform: translateX(0px);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(0px);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes slide_text_right_middle_2 {
|
|
0% {
|
|
transform: translate(0px);
|
|
opacity: 0;
|
|
}
|
|
|
|
74% {
|
|
transform: translate(0px);
|
|
opacity: 0;
|
|
}
|
|
|
|
75% {
|
|
transform: translateX(230px) translateY(17px);
|
|
opacity: 1;
|
|
color: white;
|
|
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #32CD32, 0 0 35px #32CD32, 0 0 40px #32CD32, 0 0 50px #32CD32, 0 0 75px #32CD32;
|
|
}
|
|
|
|
90% {
|
|
transform: translateX(230px) translateY(17px);
|
|
opacity: 1;
|
|
color: white;
|
|
text-shadow: 0 0 5px #000, 0 0 10px #000, 0 0 15px #000, 0 0 20px #32CD32, 0 0 35px #32CD32, 0 0 40px #32CD32, 0 0 50px #32CD32, 0 0 75px #32CD32;
|
|
;
|
|
|
|
}
|
|
|
|
95% {
|
|
transform: translateX(0px);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(0px);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
|
|
@keyframes slide_text_right_bottom {
|
|
0% {
|
|
transform: translate(0px);
|
|
opacity: 0;
|
|
}
|
|
|
|
5% {
|
|
transform: translateX(230px) translateY(80px);
|
|
opacity: 1;
|
|
color: white;
|
|
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #32CD32, 0 0 35px #32CD32, 0 0 40px #32CD32, 0 0 50px #32CD32, 0 0 75px #32CD32;
|
|
}
|
|
|
|
20% {
|
|
transform: translateX(230px) translateY(80px);
|
|
opacity: 1;
|
|
color: white;
|
|
text-shadow: 0 0 5px #000, 0 0 10px #000, 0 0 15px #000, 0 0 20px #32CD32, 0 0 35px #32CD32, 0 0 40px #32CD32, 0 0 50px #32CD32, 0 0 75px #32CD32;
|
|
}
|
|
|
|
25% {
|
|
transform: translateX(0px);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(0px);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
/* -------------------- Music -------------------- */
|
|
|
|
@keyframes scroll {
|
|
0% {
|
|
transform: translateX(100%);
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(0%);
|
|
}
|
|
}
|
|
|
|
@keyframes scroll_Repeat {
|
|
0% {
|
|
transform: translateX(0%);
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(-100%);
|
|
}
|
|
}
|
|
|
|
@keyframes scroll_text {
|
|
0% {
|
|
transform: translateX(100%);
|
|
color: white;
|
|
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 11px #fff, 0 0 12px #228DFF, 0 0 13px #228DFF, 0 0 14px #228DFF, 0 0 15px #228DFF, 0 0 16px #228DFF;
|
|
}
|
|
|
|
50% {
|
|
text-shadow: 0 0 10px #000, 0 0 11px #000, 0 0 12px #000, 0 0 13px #32CD32, 0 0 14px #32CD32, 0 0 15px #32CD32, 0 0 16px #32CD32, 0 0 17px #32CD32;
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(-100%);
|
|
color: white;
|
|
}
|
|
}
|
|
|
|
@keyframes music_title {
|
|
0% {
|
|
color: black;
|
|
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228DFF, 0 0 70px #228DFF, 0 0 80px #228DFF, 0 0 100px #228DFF, 0 0 150px #228DFF;
|
|
}
|
|
|
|
50% {
|
|
color: white;
|
|
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF;
|
|
}
|
|
|
|
100% {
|
|
color: white;
|
|
text-shadow: 0 0 5px #000, 0 0 10px #000, 0 0 15px #000, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
/* -------------------- alerts -------------------- */
|
|
|
|
@keyframes most_recent_follower {
|
|
0% {
|
|
transform: translate(0px);
|
|
opacity: 0;
|
|
}
|
|
|
|
40% {
|
|
transform: translateX(0px);
|
|
opacity: 0;
|
|
}
|
|
|
|
45% {
|
|
transform: translateX(0px) translateY(80px);
|
|
opacity: 1;
|
|
color: white;
|
|
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #32CD32, 0 0 35px #32CD32, 0 0 40px #32CD32, 0 0 50px #32CD32, 0 0 75px #32CD32;
|
|
}
|
|
|
|
47% {
|
|
transform: translateX(0px) translateY(80px);
|
|
opacity: 1;
|
|
color: white;
|
|
text-shadow: 0 0 10px #00F, 0 0 20px #00F, 0 0 30px #00F, 0 0 40px #32CD32, 0 0 70px #32CD32, 0 0 80px #32CD32, 0 0 100px #32CD32, 0 0 150px #32CD32;
|
|
}
|
|
|
|
50% {
|
|
transform: translateX(0px);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(0px);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes session_top_cheerer {
|
|
0% {
|
|
transform: translate(0px);
|
|
opacity: 0;
|
|
}
|
|
|
|
50% {
|
|
transform: translateX(0px);
|
|
opacity: 0;
|
|
}
|
|
|
|
53% {
|
|
transform: translateX(0px) translateY(80px);
|
|
opacity: 1;
|
|
color: white;
|
|
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #32CD32, 0 0 35px #32CD32, 0 0 40px #32CD32, 0 0 50px #32CD32, 0 0 75px #32CD32;
|
|
}
|
|
|
|
57% {
|
|
transform: translateX(0px) translateY(80px);
|
|
opacity: 1;
|
|
color: white;
|
|
text-shadow: 0 0 10px #00F, 0 0 20px #00F, 0 0 30px #00F, 0 0 40px #32CD32, 0 0 70px #32CD32, 0 0 80px #32CD32, 0 0 100px #32CD32, 0 0 150px #32CD32;
|
|
}
|
|
|
|
60% {
|
|
transform: translateX(0px);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(0px);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes most_recent_subscriber {
|
|
0% {
|
|
transform: translate(0px);
|
|
opacity: 0;
|
|
}
|
|
|
|
60% {
|
|
transform: translateX(0px);
|
|
opacity: 0;
|
|
}
|
|
|
|
65% {
|
|
transform: translateX(0px) translateY(80px);
|
|
opacity: 1;
|
|
color: white;
|
|
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #32CD32, 0 0 35px #32CD32, 0 0 40px #32CD32, 0 0 50px #32CD32, 0 0 75px #32CD32;
|
|
}
|
|
|
|
70% {
|
|
transform: translateX(0px) translateY(80px);
|
|
opacity: 1;
|
|
color: white;
|
|
text-shadow: 0 0 10px #00F, 0 0 20px #00F, 0 0 30px #00F, 0 0 40px #32CD32, 0 0 70px #32CD32, 0 0 80px #32CD32, 0 0 100px #32CD32, 0 0 150px #32CD32;
|
|
}
|
|
|
|
71% {
|
|
transform: translateX(0px);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(0px);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes most_recent_donator {
|
|
0% {
|
|
transform: translate(0px);
|
|
opacity: 0;
|
|
}
|
|
|
|
70% {
|
|
transform: translateX(0px);
|
|
opacity: 0;
|
|
}
|
|
|
|
75% {
|
|
transform: translateX(0px) translateY(80px);
|
|
opacity: 1;
|
|
color: white;
|
|
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #32CD32, 0 0 35px #32CD32, 0 0 40px #32CD32, 0 0 50px #32CD32, 0 0 75px #32CD32;
|
|
}
|
|
|
|
95% {
|
|
transform: translateX(0px) translateY(80px);
|
|
opacity: 1;
|
|
color: white;
|
|
text-shadow: 0 0 10px #FF0000, 0 0 20px #FF0000, 0 0 30px #FF0000, 0 0 40px #32CD32, 0 0 70px #32CD32, 0 0 80px #32CD32, 0 0 100px #32CD32, 0 0 150px #32CD32;
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(0px);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes session_top_donator {
|
|
0% {
|
|
transform: translate(0px);
|
|
opacity: 0;
|
|
}
|
|
|
|
70% {
|
|
transform: translateX(0px);
|
|
opacity: 0;
|
|
}
|
|
|
|
75% {
|
|
transform: translateX(0px) translateY(-80px);
|
|
opacity: 1;
|
|
color: white;
|
|
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #32CD32, 0 0 35px #32CD32, 0 0 40px #32CD32, 0 0 50px #32CD32, 0 0 75px #32CD32;
|
|
}
|
|
|
|
95% {
|
|
transform: translateX(0px) translateY(-80px);
|
|
opacity: 1;
|
|
color: white;
|
|
text-shadow: 0 0 10px #FF0000, 0 0 20px #FF0000, 0 0 30px #FF0000, 0 0 40px #32CD32, 0 0 70px #32CD32, 0 0 80px #32CD32, 0 0 100px #32CD32, 0 0 150px #32CD32;
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(0px);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
/* -------------------- filter-animation -------------------- */
|
|
|
|
@keyframes filter-animation {
|
|
0% {
|
|
filter: hue-rotate(0deg);
|
|
}
|
|
|
|
50% {
|
|
filter: hue-rotate(360deg);
|
|
}
|
|
|
|
100% {
|
|
filter: hue-rotate(0deg);
|
|
}
|
|
}
|
|
|
|
/* -------------------- Brand Name -------------------- */
|
|
|
|
|
|
@keyframes brand_name {
|
|
0% {
|
|
color: #000;
|
|
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228DFF;
|
|
}
|
|
|
|
50% {
|
|
color: white;
|
|
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228DFF;
|
|
}
|
|
|
|
100% {
|
|
color: white;
|
|
text-shadow: 0 0 5px #000, 0 0 10px #000, 0 0 15px #000, 0 0 20px #228DFF;
|
|
}
|
|
}
|
|
|
|
/* -------------------- pulse -------------------- */
|
|
|
|
@keyframes pulse {
|
|
0% {
|
|
box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
|
|
}
|
|
|
|
70% {
|
|
box-shadow: 0 0 0 50px rgba(204, 169, 44, 0);
|
|
}
|
|
|
|
100% {
|
|
box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes size-pulse {
|
|
0% {
|
|
transform: scale(0.9);
|
|
}
|
|
|
|
50% {
|
|
transform: scale(1);
|
|
}
|
|
|
|
100% {
|
|
transform: scale(0.9);
|
|
}
|
|
}
|
|
|
|
@keyframes size-pulse-large {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
|
|
50% {
|
|
transform: scale(1.5);
|
|
}
|
|
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
|
|
/* -------------------- spiral -------------------- */
|
|
|
|
@keyframes spiral {
|
|
0% {
|
|
transform: scaleX(0);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
50% {
|
|
transform: scaleX(1);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
transform: scaleX(0);
|
|
opacity: 0.7;
|
|
}
|
|
}
|
|
|
|
/* -------------------- shine -------------------- */
|
|
|
|
@keyframes shine {
|
|
0% {
|
|
background-image: -webkit-linear-gradient(top left,
|
|
rgba(255, 255, 255, 0.0) 0%,
|
|
rgba(255, 255, 255, 0.2) 45%,
|
|
rgba(255, 255, 255, 0.5) 48%,
|
|
rgba(255, 255, 255, 0.8) 50%,
|
|
rgba(255, 255, 255, 0.5) 52%,
|
|
rgba(255, 255, 255, 0.2) 57%,
|
|
rgba(255, 255, 255, 0.0) 100%);
|
|
background-size: 100% 100%;
|
|
transform: translate(-100%);
|
|
}
|
|
|
|
100% {
|
|
transform: translate(300%);
|
|
|
|
}
|
|
}
|
|
|
|
/* -------------------- lines -------------------- */
|
|
|
|
@keyframes lines {
|
|
|
|
0%,
|
|
50%,
|
|
100% {
|
|
transform: translateY(0%);
|
|
}
|
|
|
|
25% {
|
|
transform: translateY(100%);
|
|
}
|
|
|
|
75% {
|
|
transform: translateY(-100%);
|
|
}
|
|
} |