fake-engine/animations.css at main · theonlyasdk/fake-engine · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
@keyframes crazy {
    /* 0%: Start in place, fully visible, rainbow gradient */
    0% {
        transform: perspective(1000px) translate3d(0, 0, 0) scale(1,1) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        filter: blur(0px) opacity(1);
        background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);
        background-size: 400% 400%;
        background-position: 0% 50%;
    }
    /* 10%: Fly far away (shrink, fade, move back in Z), still rainbow */
    10% {
        transform: perspective(1000px) translate3d(0, 0, -2000px) scale(0.1,0.1) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        filter: blur(8px) opacity(0.2);
        background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);
        background-size: 400% 400%;
        background-position: 20% 50%;
    }
    /* 20%: Fly back in (grow, unblur, move to original), rainbow */
    20% {
        transform: perspective(1000px) translate3d(0, 0, 0) scale(1,1) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        filter: blur(0px) opacity(1);
        background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);
        background-size: 400% 400%;
        background-position: 40% 50%;
    }
    /* 30%: Squishy movement (stretch and squash), rainbow */
    30% {
        transform: perspective(1000px) translate3d(0, 0, 0) scale(1.5,0.7) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        filter: blur(0px) opacity(1);
        background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);
        background-size: 400% 400%;
        background-position: 60% 50%;
    }
    35% {
        transform: perspective(1000px) translate3d(0, 0, 0) scale(0.7,1.5) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        filter: blur(0px) opacity(1);
        background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);
        background-size: 400% 400%;
        background-position: 70% 50%;
    }
    40% {
        transform: perspective(1000px) translate3d(0, 0, 0) scale(1,1) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        filter: blur(0px) opacity(1);
        background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);
        background-size: 400% 400%;
        background-position: 80% 50%;
    }
    /* 50%: Backflip (rotateX 360deg), rainbow */
    50% {
        transform: perspective(1000px) translate3d(0, 0, 0) scale(1,1) rotateX(360deg) rotateY(0deg) rotateZ(0deg);
        filter: blur(0px) opacity(1);
        background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);
        background-size: 400% 400%;
        background-position: 100% 50%;
    }
    /* 60%: Barrel roll (rotateZ 360deg), rainbow */
    60% {
        transform: perspective(1000px) translate3d(0, 0, 0) scale(1,1) rotateX(360deg) rotateY(0deg) rotateZ(360deg);
        filter: blur(0px) opacity(1);
        background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);
        background-size: 400% 400%;
        background-position: 80% 50%;
    }
    /* 70%: Blur out completely, gradient to white */
    70% {
        transform: perspective(1000px) translate3d(0, 0, 0) scale(1,1) rotateX(360deg) rotateY(0deg) rotateZ(360deg);
        filter: blur(32px) opacity(1);
        background: linear-gradient(90deg, rgba(255, 2, 2, 0.158), white 100%);
        background-size: 400% 400%;
        background-position: 50% 50%;
    }
    /* 85%: Start flying back in, still blurred, still white */
    85% {
        transform: perspective(1000px) translate3d(-100vw, 0, 0) scale(1,1) rotateX(360deg) rotateY(0deg) rotateZ(360deg);
        filter: blur(32px) opacity(1);
        background: linear-gradient(90deg, rgba(255, 2, 2, 0.158), white 100%);
        background-size: 400% 400%;
        background-position: 50% 50%;
    }
    /* 95%: Arrive back in place, unblur, rainbow returns */
    95% {
        transform: perspective(1000px) translate3d(0, 0, 0) scale(1,1) rotateX(360deg) rotateY(0deg) rotateZ(360deg);
        filter: blur(0px) opacity(1);
        background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);
        background-size: 400% 400%;
        background-position: 0% 50%;
    }
    /* 100%: Reset to original state, rainbow */
    100% {
        transform: perspective(1000px) translate3d(0, 0, 0) scale(1,1) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        filter: blur(0px) opacity(1);
        background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);
        background-size: 400% 400%;
        background-position: 0% 50%;
    }
}

/* Animate pixelation by scaling up and down with pixelated rendering */
.go-crazy {
    animation: crazy 10s infinite cubic-bezier(0.4, 0, 0.6, 1), pixelate-crazy 10s infinite cubic-bezier(0.4, 0, 0.6, 1);
    border-style: dashed;
    transition: all 100ms ease-out;
    perspective: 1000px;
    transform-style: preserve-3d;
    image-rendering: pixelated;
}

@keyframes pixelate-crazy {
    0%, 100% {
        /* Normal scale */
        scale: 1 1;
    }
    20% {
        /* Pixelate more by scaling up */
        scale: 2 2;
    }
    40% {
        /* Even more pixelated */
        scale: 4 4;
    }
    60% {
        /* Back to normal */
        scale: 1 1;
    }
    80% {
        /* Pixelate again */
        scale: 3 3;
    }
}