1 | export default {
|
2 | "--animation-fade-in": "fade-in .5s var(--ease-3)",
|
3 | "--animation-fade-in-@": `
|
4 | @keyframes fade-in {
|
5 | to { opacity: 1 }
|
6 | }`,
|
7 | "--animation-fade-in-bloom": "fade-in-bloom 2s var(--ease-3)",
|
8 | "--animation-fade-in-bloom-@": `
|
9 | @keyframes fade-in-bloom {
|
10 | 0% { opacity: 0; filter: brightness(1) blur(20px) }
|
11 | 10% { opacity: 1; filter: brightness(2) blur(10px) }
|
12 | 100% { opacity: 1; filter: brightness(1) blur(0) }
|
13 | }`,
|
14 | "--animation-fade-in-bloom-@media:dark": `
|
15 | @keyframes fade-in-bloom {
|
16 | 0% { opacity: 0; filter: brightness(1) blur(20px) }
|
17 | 10% { opacity: 1; filter: brightness(0.5) blur(10px) }
|
18 | 100% { opacity: 1; filter: brightness(1) blur(0) }
|
19 | }`,
|
20 | "--animation-fade-out": "fade-out .5s var(--ease-3)",
|
21 | "--animation-fade-out-@": `
|
22 | @keyframes fade-out {
|
23 | to { opacity: 0 }
|
24 | }`,
|
25 | "--animation-fade-out-bloom": "fade-out-bloom 2s var(--ease-3)",
|
26 | "--animation-fade-out-bloom-@": `
|
27 | @keyframes fade-out-bloom {
|
28 | 100% { opacity: 0; filter: brightness(1) blur(20px) }
|
29 | 10% { opacity: 1; filter: brightness(2) blur(10px) }
|
30 | 0% { opacity: 1; filter: brightness(1) blur(0) }
|
31 | }`,
|
32 | "--animation-fade-out-bloom-@media:dark": `
|
33 | @keyframes fade-out-bloom {
|
34 | 100% { opacity: 0; filter: brightness(1) blur(20px) }
|
35 | 10% { opacity: 1; filter: brightness(0.5) blur(10px) }
|
36 | 0% { opacity: 1; filter: brightness(1) blur(0) }
|
37 | }`,
|
38 | "--animation-scale-up": "scale-up .5s var(--ease-3)",
|
39 | "--animation-scale-up-@": `
|
40 | @keyframes scale-up {
|
41 | to { transform: scale(1.25) }
|
42 | }`,
|
43 | "--animation-scale-down": "scale-down .5s var(--ease-3)",
|
44 | "--animation-scale-down-@": `
|
45 | @keyframes scale-down {
|
46 | to { transform: scale(.75) }
|
47 | }`,
|
48 | "--animation-slide-out-up": "slide-out-up .5s var(--ease-3)",
|
49 | "--animation-slide-out-up-@": `
|
50 | @keyframes slide-out-up {
|
51 | to { transform: translateY(-100%) }
|
52 | }`,
|
53 | "--animation-slide-out-down": "slide-out-down .5s var(--ease-3)",
|
54 | "--animation-slide-out-down-@": `
|
55 | @keyframes slide-out-down {
|
56 | to { transform: translateY(100%) }
|
57 | }`,
|
58 | "--animation-slide-out-right": "slide-out-right .5s var(--ease-3)",
|
59 | "--animation-slide-out-right-@": `
|
60 | @keyframes slide-out-right {
|
61 | to { transform: translateX(100%) }
|
62 | }`,
|
63 | "--animation-slide-out-left": "slide-out-left .5s var(--ease-3)",
|
64 | "--animation-slide-out-left-@": `
|
65 | @keyframes slide-out-left {
|
66 | to { transform: translateX(-100%) }
|
67 | }`,
|
68 | "--animation-slide-in-up": "slide-in-up .5s var(--ease-3)",
|
69 | "--animation-slide-in-up-@": `
|
70 | @keyframes slide-in-up {
|
71 | from { transform: translateY(100%) }
|
72 | }`,
|
73 | "--animation-slide-in-down": "slide-in-down .5s var(--ease-3)",
|
74 | "--animation-slide-in-down-@": `
|
75 | @keyframes slide-in-down {
|
76 | from { transform: translateY(-100%) }
|
77 | }`,
|
78 | "--animation-slide-in-right": "slide-in-right .5s var(--ease-3)",
|
79 | "--animation-slide-in-right-@": `
|
80 | @keyframes slide-in-right {
|
81 | from { transform: translateX(-100%) }
|
82 | }`,
|
83 | "--animation-slide-in-left": "slide-in-left .5s var(--ease-3)",
|
84 | "--animation-slide-in-left-@": `
|
85 | @keyframes slide-in-left {
|
86 | from { transform: translateX(100%) }
|
87 | }`,
|
88 | "--animation-shake-x": "shake-x .75s var(--ease-out-5)",
|
89 | "--animation-shake-x-@": `
|
90 | @keyframes shake-x {
|
91 | 0%, 100% { transform: translateX(0%) }
|
92 | 20% { transform: translateX(-5%) }
|
93 | 40% { transform: translateX(5%) }
|
94 | 60% { transform: translateX(-5%) }
|
95 | 80% { transform: translateX(5%) }
|
96 | }`,
|
97 | "--animation-shake-y": "shake-y .75s var(--ease-out-5)",
|
98 | "--animation-shake-y-@": `
|
99 | @keyframes shake-y {
|
100 | 0%, 100% { transform: translateY(0%) }
|
101 | 20% { transform: translateY(-5%) }
|
102 | 40% { transform: translateY(5%) }
|
103 | 60% { transform: translateY(-5%) }
|
104 | 80% { transform: translateY(5%) }
|
105 | }`,
|
106 | "--animation-spin": "spin 2s linear infinite",
|
107 | "--animation-spin-@": `
|
108 | @keyframes spin {
|
109 | to { transform: rotate(1turn) }
|
110 | }`,
|
111 | "--animation-ping": "ping 5s var(--ease-out-3) infinite",
|
112 | "--animation-ping-@": `
|
113 | @keyframes ping {
|
114 | 90%, 100% {
|
115 | transform: scale(2);
|
116 | opacity: 0;
|
117 | }
|
118 | }`,
|
119 | "--animation-blink": "blink 1s var(--ease-out-3) infinite",
|
120 | "--animation-blink-@": `
|
121 | @keyframes blink {
|
122 | 0%, 100% {
|
123 | opacity: 1
|
124 | }
|
125 | 50% {
|
126 | opacity: .5
|
127 | }
|
128 | }`,
|
129 | "--animation-float": "float 3s var(--ease-in-out-3) infinite",
|
130 | "--animation-float-@": `
|
131 | @keyframes float {
|
132 | 50% { transform: translateY(-25%) }
|
133 | }`,
|
134 | "--animation-bounce": "bounce 2s var(--ease-squish-2) infinite",
|
135 | "--animation-bounce-@": `
|
136 | @keyframes bounce {
|
137 | 25% { transform: translateY(-20%) }
|
138 | 40% { transform: translateY(-3%) }
|
139 | 0%, 60%, 100% { transform: translateY(0) }
|
140 | }`,
|
141 | "--animation-pulse": "pulse 2s var(--ease-out-3) infinite",
|
142 | "--animation-pulse-@": `
|
143 | @keyframes pulse {
|
144 | 50% { transform: scale(.9,.9) }
|
145 | }`,
|
146 | }
|