/
theme.ts
196 lines (195 loc) · 21.1 KB
/
theme.ts
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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
import type { Theme } from '@unocss/preset-mini'
import { boxShadowsBase, ringBase, transformBase } from '@unocss/preset-mini/rules'
import { theme as miniTheme } from '@unocss/preset-mini/theme'
import { backdropFilterBase, borderSpacingBase, filterBase, fontVariantNumericBase, scrollSnapTypeBase, touchActionBase } from './rules'
export const theme: Theme = {
...miniTheme,
animation: {
keyframes: {
'pulse': '{0%, 100% {opacity:1} 50% {opacity:.5}}',
'bounce': '{0%, 100% {transform:translateY(-25%);animation-timing-function:cubic-bezier(0.8,0,1,1)} 50% {transform:translateY(0);animation-timing-function:cubic-bezier(0,0,0.2,1)}}',
'spin': '{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}',
'ping': '{0%{transform:scale(1);opacity:1}75%,100%{transform:scale(2);opacity:0}}',
'bounce-alt': '{from,20%,53%,80%,to{animation-timing-function:cubic-bezier(0.215,0.61,0.355,1);transform:translate3d(0,0,0)}40%,43%{animation-timing-function:cubic-bezier(0.755,0.05,0.855,0.06);transform:translate3d(0,-30px,0)}70%{animation-timing-function:cubic-bezier(0.755,0.05,0.855,0.06);transform:translate3d(0,-15px,0)}90%{transform:translate3d(0,-4px,0)}}',
'flash': '{from,50%,to{opacity:1}25%,75%{opacity:0}}',
'pulse-alt': '{from{transform:scale3d(1,1,1)}50%{transform:scale3d(1.05,1.05,1.05)}to{transform:scale3d(1,1,1)}}',
'rubber-band': '{from{transform:scale3d(1,1,1)}30%{transform:scale3d(1.25,0.75,1)}40%{transform:scale3d(0.75,1.25,1)}50%{transform:scale3d(1.15,0.85,1)}65%{transform:scale3d(0.95,1.05,1)}75%{transform:scale3d(1.05,0.95,1)}to{transform:scale3d(1,1,1)}}',
'shake-x': '{from,to{transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{transform:translate3d(-10px,0,0)}20%,40%,60%,80%{transform:translate3d(10px,0,0)}}',
'shake-y': '{from,to{transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{transform:translate3d(0,-10px,0)}20%,40%,60%,80%{transform:translate3d(0,10px,0)}}',
'head-shake': '{0%{transform:translateX(0)}6.5%{transform:translateX(-6px) rotateY(-9deg)}18.5%{transform:translateX(5px) rotateY(7deg)}31.5%{transform:translateX(-3px) rotateY(-5deg)}43.5%{transform:translateX(2px) rotateY(3deg)}50%{transform:translateX(0)}}',
'swing': '{20%{transform:rotate3d(0,0,1,15deg)}40%{transform:rotate3d(0,0,1,-10deg)}60%{transform:rotate3d(0,0,1,5deg)}80%{transform:rotate3d(0,0,1,-5deg)}to{transform:rotate3d(0,0,1,0deg)}}',
'tada': '{from{transform:scale3d(1,1,1)}10%,20%{transform:scale3d(0.9,0.9,0.9) rotate3d(0,0,1,-3deg)}30%,50%,70%,90%{transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}40%,60%,80%{transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}to{transform:scale3d(1,1,1)}}',
'wobble': '{from{transform:translate3d(0,0,0)}15%{transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg)}30%{transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg)}45%{transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg)}60%{transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg)}75%{transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg)}to{transform:translate3d(0,0,0)}}',
'jello': '{from,11.1% to{transform:translate3d(0,0,0)}22.2%{transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{transform:skewX(6.25deg) skewY(6.25deg)}44.4%{transform:skewX(-3.125deg)skewY(-3.125deg)}55.5%{transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{transform:skewX(-0.78125deg) skewY(-0.78125deg)}77.7%{transform:skewX(0.390625deg) skewY(0.390625deg)}88.8%{transform:skewX(-0.1953125deg) skewY(-0.1953125deg)}}',
'heart-beat': '{0%{transform:scale(1)}14%{transform:scale(1.3)}28%{transform:scale(1)}42%{transform:scale(1.3)}70%{transform:scale(1)}}',
'hinge': '{0%{transform-origin:top left;animation-timing-function:ease-in-out}20%,60%{transform:rotate3d(0,0,1,80deg);transform-origin:top left;animation-timing-function:ease-in-out}40%,80%{transform:rotate3d(0,0,1,60deg);transform-origin:top left;animation-timing-function:ease-in-out}to{transform:translate3d(0,700px,0);opacity:0}}',
'jack-in-the-box': '{from{opacity:0;transform-origin:center bottom;transform:scale(0.1) rotate(30deg)}50%{transform:rotate(-10deg)}70%{transform:rotate(3deg)}to{transform:scale(1)}}',
'light-speed-in-left': '{from{opacity:0;transform:translate3d(-100%,0,0) skewX(-30deg)}60%{opacity:1;transform:skewX(20deg)}80%{transform:skewX(-5deg)}to{transform:translate3d(0,0,0)}}',
'light-speed-in-right': '{from{opacity:0;transform:translate3d(100%,0,0) skewX(-30deg)}60%{opacity:1;transform:skewX(20deg)}80%{transform:skewX(-5deg)}to{transform:translate3d(0,0,0)}}',
'light-speed-out-left': '{from{opacity:1}to{opacity:0;transform:translate3d(-100%,0,0) skewX(30deg)}}',
'light-speed-out-right': '{from{opacity:1}to{opacity:0;transform:translate3d(100%,0,0) skewX(30deg)}}',
'flip': '{from{transform:perspective(400px) scale3d(1,1,1) translate3d(0,0,0) rotate3d(0,1,0,-360deg);animation-timing-function:ease-out}40%{transform:perspective(400px) scale3d(1,1,1) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);animation-timing-function:ease-out}50%{transform:perspective(400px) scale3d(1,1,1) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);animation-timing-function:ease-in}80%{transform:perspective(400px) scale3d(0.95,0.95,0.95) translate3d(0,0,0) rotate3d(0,1,0,0deg);animation-timing-function:ease-in}to{transform:perspective(400px) scale3d(1,1,1) translate3d(0,0,0) rotate3d(0,1,0,0deg);animation-timing-function:ease-in}}',
'flip-in-x': '{from{transform:perspective(400px) rotate3d(1,0,0,90deg);animation-timing-function:ease-in;opacity:0}40%{transform:perspective(400px) rotate3d(1,0,0,-20deg);animation-timing-function:ease-in}60%{transform:perspective(400px) rotate3d(1,0,0,10deg);opacity:1}80%{transform:perspective(400px) rotate3d(1,0,0,-5deg)}to{transform:perspective(400px)}}',
'flip-in-y': '{from{transform:perspective(400px) rotate3d(0,1,0,90deg);animation-timing-function:ease-in;opacity:0}40%{transform:perspective(400px) rotate3d(0,1,0,-20deg);animation-timing-function:ease-in}60%{transform:perspective(400px) rotate3d(0,1,0,10deg);opacity:1}80%{transform:perspective(400px) rotate3d(0,1,0,-5deg)}to{transform:perspective(400px)}}',
'flip-out-x': '{from{transform:perspective(400px)}30%{transform:perspective(400px) rotate3d(1,0,0,-20deg);opacity:1}to{transform:perspective(400px) rotate3d(1,0,0,90deg);opacity:0}}',
'flip-out-y': '{from{transform:perspective(400px)}30%{transform:perspective(400px) rotate3d(0,1,0,-15deg);opacity:1}to{transform:perspective(400px) rotate3d(0,1,0,90deg);opacity:0}}',
'rotate-in': '{from{transform-origin:center;transform:rotate3d(0,0,1,-200deg);opacity:0}to{transform-origin:center;transform:translate3d(0,0,0);opacity:1}}',
'rotate-in-down-left': '{from{transform-origin:left bottom;transform:rotate3d(0,0,1,-45deg);opacity:0}to{transform-origin:left bottom;transform:translate3d(0,0,0);opacity:1}}',
'rotate-in-down-right': '{from{transform-origin:right bottom;transform:rotate3d(0,0,1,45deg);opacity:0}to{transform-origin:right bottom;transform:translate3d(0,0,0);opacity:1}}',
'rotate-in-up-left': '{from{transform-origin:left top;transform:rotate3d(0,0,1,45deg);opacity:0}to{transform-origin:left top;transform:translate3d(0,0,0);opacity:1}}',
'rotate-in-up-right': '{from{transform-origin:right bottom;transform:rotate3d(0,0,1,-90deg);opacity:0}to{transform-origin:right bottom;transform:translate3d(0,0,0);opacity:1}}',
'rotate-out': '{from{transform-origin:center;opacity:1}to{transform-origin:center;transform:rotate3d(0,0,1,200deg);opacity:0}}',
'rotate-out-down-left': '{from{transform-origin:left bottom;opacity:1}to{transform-origin:left bottom;transform:rotate3d(0,0,1,45deg);opacity:0}}',
'rotate-out-down-right': '{from{transform-origin:right bottom;opacity:1}to{transform-origin:right bottom;transform:rotate3d(0,0,1,-45deg);opacity:0}}',
'rotate-out-up-left': '{from{transform-origin:left bottom;opacity:1}to{transform-origin:left bottom;transform:rotate3d(0,0,1,-45deg);opacity:0}}',
'rotate-out-up-right': '{from{transform-origin:right bottom;opacity:1}to{transform-origin:left bottom;transform:rotate3d(0,0,1,90deg);opacity:0}}',
'roll-in': '{from{opacity:0;transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg)}to{opacity:1;transform:translate3d(0,0,0)}}',
'roll-out': '{from{opacity:1}to{opacity:0;transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg)}}',
'zoom-in': '{from{opacity:0;transform:scale3d(0.3,0.3,0.3)}50%{opacity:1}}',
'zoom-in-down': '{from{opacity:0;transform:scale3d(0.1,0.1,0.1) translate3d(0,-1000px,0);animation-timing-function:cubic-bezier(0.55,0.055,0.675,0.19)}60%{opacity:1;transform:scale3d(0.475,0.475,0.475) translate3d(0,60px,0);animation-timing-function:cubic-bezier(0.175,0.885,0.32,1)}}',
'zoom-in-left': '{from{opacity:0;transform:scale3d(0.1,0.1,0.1) translate3d(-1000px,0,0);animation-timing-function:cubic-bezier(0.55,0.055,0.675,0.19)}60%{opacity:1;transform:scale3d(0.475,0.475,0.475) translate3d(10px,0,0);animation-timing-function:cubic-bezier(0.175,0.885,0.32,1)}}',
'zoom-in-right': '{from{opacity:0;transform:scale3d(0.1,0.1,0.1) translate3d(1000px,0,0);animation-timing-function:cubic-bezier(0.55,0.055,0.675,0.19)}60%{opacity:1;transform:scale3d(0.475,0.475,0.475) translate3d(-10px,0,0);animation-timing-function:cubic-bezier(0.175,0.885,0.32,1)}}',
'zoom-in-up': '{from{opacity:0;transform:scale3d(0.1,0.1,0.1) translate3d(0,1000px,0);animation-timing-function:cubic-bezier(0.55,0.055,0.675,0.19)}60%{opacity:1;transform:scale3d(0.475,0.475,0.475) translate3d(0,-60px,0);animation-timing-function:cubic-bezier(0.175,0.885,0.32,1)}}',
'zoom-out': '{from{opacity:1}50%{opacity:0;transform:scale3d(0.3,0.3,0.3)}to{opacity:0}}',
'zoom-out-down': '{40%{opacity:1;transform:scale3d(0.475,0.475,0.475) translate3d(0,-60px,0);animation-timing-function:cubic-bezier(0.55,0.055,0.675,0.19)}to{opacity:0;transform:scale3d(0.1,0.1,0.1) translate3d(0,2000px,0);transform-origin:center bottom;animation-timing-function:cubic-bezier(0.175,0.885,0.32,1)}}',
'zoom-out-left': '{40%{opacity:1;transform:scale3d(0.475,0.475,0.475) translate3d(42px,0,0)}to{opacity:0;transform:scale(0.1) translate3d(-2000px,0,0);transform-origin:left center}}',
'zoom-out-right': '{40%{opacity:1;transform:scale3d(0.475,0.475,0.475) translate3d(-42px,0,0)}to{opacity:0;transform:scale(0.1) translate3d(2000px,0,0);transform-origin:right center}}',
'zoom-out-up': '{40%{opacity:1;transform:scale3d(0.475,0.475,0.475) translate3d(0,60px,0);animation-timing-function:cubic-bezier(0.55,0.055,0.675,0.19)}to{opacity:0;transform:scale3d(0.1,0.1,0.1) translate3d(0,-2000px,0);transform-origin:center bottom;animation-timing-function:cubic-bezier(0.175,0.885,0.32,1)}}',
'bounce-in': '{from,20%,40%,60%,80%,to{animation-timing-function:ease-in-out}0%{opacity:0;transform:scale3d(0.3,0.3,0.3)}20%{transform:scale3d(1.1,1.1,1.1)}40%{transform:scale3d(0.9,0.9,0.9)}60%{transform:scale3d(1.03,1.03,1.03);opacity:1}80%{transform:scale3d(0.97,0.97,0.97)}to{opacity:1;transform:scale3d(1,1,1)}}',
'bounce-in-down': '{from,60%,75%,90%,to{animation-timing-function:cubic-bezier(0.215,0.61,0.355,1)}0%{opacity:0;transform:translate3d(0,-3000px,0)}60%{opacity:1;transform:translate3d(0,25px,0)}75%{transform:translate3d(0,-10px,0)}90%{transform:translate3d(0,5px,0)}to{transform:translate3d(0,0,0)}}',
'bounce-in-left': '{from,60%,75%,90%,to{animation-timing-function:cubic-bezier(0.215,0.61,0.355,1)}0%{opacity:0;transform:translate3d(-3000px,0,0)}60%{opacity:1;transform:translate3d(25px,0,0)}75%{transform:translate3d(-10px,0,0)}90%{transform:translate3d(5px,0,0)}to{transform:translate3d(0,0,0)}}',
'bounce-in-right': '{from,60%,75%,90%,to{animation-timing-function:cubic-bezier(0.215,0.61,0.355,1)}0%{opacity:0;transform:translate3d(3000px,0,0)}60%{opacity:1;transform:translate3d(-25px,0,0)}75%{transform:translate3d(10px,0,0)}90%{transform:translate3d(-5px,0,0)}to{transform:translate3d(0,0,0)}}',
'bounce-in-up': '{from,60%,75%,90%,to{animation-timing-function:cubic-bezier(0.215,0.61,0.355,1)}0%{opacity:0;transform:translate3d(0,3000px,0)}60%{opacity:1;transform:translate3d(0,-20px,0)}75%{transform:translate3d(0,10px,0)}90%{transform:translate3d(0,-5px,0)}to{transform:translate3d(0,0,0)}}',
'bounce-out': '{20%{transform:scale3d(0.9,0.9,0.9)}50%,55%{opacity:1;transform:scale3d(1.1,1.1,1.1)}to{opacity:0;transform:scale3d(0.3,0.3,0.3)}}',
'bounce-out-down': '{20%{transform:translate3d(0,10px,0)}40%,45%{opacity:1;transform:translate3d(0,-20px,0)}to{opacity:0;transform:translate3d(0,2000px,0)}}',
'bounce-out-left': '{20%{opacity:1;transform:translate3d(20px,0,0)}to{opacity:0;transform:translate3d(-2000px,0,0)}}',
'bounce-out-right': '{20%{opacity:1;transform:translate3d(-20px,0,0)}to{opacity:0;transform:translate3d(2000px,0,0)}}',
'bounce-out-up': '{20%{transform:translate3d(0,-10px,0)}40%,45%{opacity:1;transform:translate3d(0,20px,0)}to{opacity:0;transform:translate3d(0,-2000px,0)}}',
'slide-in-down': '{from{transform:translate3d(0,-100%,0);visibility:visible}to{transform:translate3d(0,0,0)}}',
'slide-in-left': '{from{transform:translate3d(-100%,0,0);visibility:visible}to{transform:translate3d(0,0,0)}}',
'slide-in-right': '{from{transform:translate3d(100%,0,0);visibility:visible}to{transform:translate3d(0,0,0)}}',
'slide-in-up': '{from{transform:translate3d(0,100%,0);visibility:visible}to{transform:translate3d(0,0,0)}}',
'slide-out-down': '{from{transform:translate3d(0,0,0)}to{visibility:hidden;transform:translate3d(0,100%,0)}}',
'slide-out-left': '{from{transform:translate3d(0,0,0)}to{visibility:hidden;transform:translate3d(-100%,0,0)}}',
'slide-out-right': '{from{transform:translate3d(0,0,0)}to{visibility:hidden;transform:translate3d(100%,0,0)}}',
'slide-out-up': '{from{transform:translate3d(0,0,0)}to{visibility:hidden;transform:translate3d(0,-100%,0)}}',
'fade-in': '{from{opacity:0}to{opacity:1}}',
'fade-in-down': '{from{opacity:0;transform:translate3d(0,-100%,0)}to{opacity:1;transform:translate3d(0,0,0)}}',
'fade-in-down-big': '{from{opacity:0;transform:translate3d(0,-2000px,0)}to{opacity:1;transform:translate3d(0,0,0)}}',
'fade-in-left': '{from{opacity:0;transform:translate3d(-100%,0,0)}to{opacity:1;transform:translate3d(0,0,0)}}',
'fade-in-left-big': '{from{opacity:0;transform:translate3d(-2000px,0,0)}to{opacity:1;transform:translate3d(0,0,0)}}',
'fade-in-right': '{from{opacity:0;transform:translate3d(100%,0,0)}to{opacity:1;transform:translate3d(0,0,0)}}',
'fade-in-right-big': '{from{opacity:0;transform:translate3d(2000px,0,0)}to{opacity:1;transform:translate3d(0,0,0)}}',
'fade-in-up': '{from{opacity:0;transform:translate3d(0,100%,0)}to{opacity:1;transform:translate3d(0,0,0)}}',
'fade-in-up-big': '{from{opacity:0;transform:translate3d(0,2000px,0)}to{opacity:1;transform:translate3d(0,0,0)}}',
'fade-in-top-left': '{from{opacity:0;transform:translate3d(-100%,-100%,0)}to{opacity:1;transform:translate3d(0,0,0)}}',
'fade-in-top-right': '{from{opacity:0;transform:translate3d(100%,-100%,0)}to{opacity:1;transform:translate3d(0,0,0)}}',
'fade-in-bottom-left': '{from{opacity:0;transform:translate3d(-100%,100%,0)}to{opacity:1;transform:translate3d(0,0,0)}}',
'fade-in-bottom-right': '{from{opacity:0;transform:translate3d(100%,100%,0)}to{opacity:1;transform:translate3d(0,0,0)}}',
'fade-out': '{from{opacity:1}to{opacity:0}}',
'fade-out-down': '{from{opacity:1}to{opacity:0;transform:translate3d(0,100%,0)}}',
'fade-out-down-big': '{from{opacity:1}to{opacity:0;transform:translate3d(0,2000px,0)}}',
'fade-out-left': '{from{opacity:1}to{opacity:0;transform:translate3d(-100%,0,0)}}',
'fade-out-left-big': '{from{opacity:1}to{opacity:0;transform:translate3d(-2000px,0,0)}}',
'fade-out-right': '{from{opacity:1}to{opacity:0;transform:translate3d(100%,0,0)}}',
'fade-out-right-big': '{from{opacity:1}to{opacity:0;transform:translate3d(2000px,0,0)}}',
'fade-out-up': '{from{opacity:1}to{opacity:0;transform:translate3d(0,-100%,0)}}',
'fade-out-up-big': '{from{opacity:1}to{opacity:0;transform:translate3d(0,-2000px,0)}}',
'fade-out-top-left': '{from{opacity:1;transform:translate3d(0,0,0)}to{opacity:0;transform:translate3d(-100%,-100%,0)}}',
'fade-out-top-right': '{from{opacity:1;transform:translate3d(0,0,0)}to{opacity:0;transform:translate3d(100%,-100%,0)}}',
'fade-out-bottom-left': '{from{opacity:1;transform:translate3d(0,0,0)}to{opacity:0;transform:translate3d(-100%,100%,0)}}',
'fade-out-bottom-right': '{from{opacity:1;transform:translate3d(0,0,0)}to{opacity:0;transform:translate3d(100%,100%,0)}}',
'back-in-up': '{0%{opacity:0.7;transform:translateY(1200px) scale(0.7)}80%{opacity:0.7;transform:translateY(0px) scale(0.7)}100%{opacity:1;transform:scale(1)}}',
'back-in-down': '{0%{opacity:0.7;transform:translateY(-1200px) scale(0.7)}80%{opacity:0.7;transform:translateY(0px) scale(0.7)}100%{opacity:1;transform:scale(1)}}',
'back-in-right': '{0%{opacity:0.7;transform:translateX(2000px) scale(0.7)}80%{opacity:0.7;transform:translateY(0px) scale(0.7)}100%{opacity:1;transform:scale(1)}}',
'back-in-left': '{0%{opacity:0.7;transform:translateX(-2000px) scale(0.7)}80%{opacity:0.7;transform:translateX(0px) scale(0.7)}100%{opacity:1;transform:scale(1)}}',
'back-out-up': '{0%{opacity:1;transform:scale(1)}80%{opacity:0.7;transform:translateY(0px) scale(0.7)}100%{opacity:0.7;transform:translateY(-700px) scale(0.7)}}',
'back-out-down': '{0%{opacity:1;transform:scale(1)}80%{opacity:0.7;transform:translateY(0px) scale(0.7)}100%{opacity:0.7;transform:translateY(700px) scale(0.7)}}',
'back-out-right': '{0%{opacity:1;transform:scale(1)}80%{opacity:0.7;transform:translateY(0px) scale(0.7)}100%{opacity:0.7;transform:translateX(2000px) scale(0.7)}}',
'back-out-left': '{0%{opacity:1;transform:scale(1)}80%{opacity:0.7;transform:translateX(-2000px) scale(0.7)}100%{opacity:0.7;transform:translateY(-700px) scale(0.7)}}',
},
durations: {
'pulse': '2s',
'heart-beat': '1.3s',
'bounce-in': '0.75s',
'bounce-out': '0.75s',
'flip-out-x': '0.75s',
'flip-out-y': '0.75s',
'hinge': '2s',
},
timingFns: {
'pulse': 'cubic-bezier(0.4,0,.6,1)',
'ping': 'cubic-bezier(0,0,.2,1)',
'head-shake': 'ease-in-out',
'heart-beat': 'ease-in-out',
'pulse-alt': 'ease-in-out',
'light-speed-in-left': 'ease-out',
'light-speed-in-right': 'ease-out',
'light-speed-out-left': 'ease-in',
'light-speed-out-right': 'ease-in',
},
properties: {
'bounce-alt': { 'transform-origin': 'center bottom' },
'jello': { 'transform-origin': 'center' },
'swing': { 'transform-origin': 'top center' },
'flip': { 'backface-visibility': 'visible' },
'flip-in-x': { 'backface-visibility': 'visible !important' },
'flip-in-y': { 'backface-visibility': 'visible !important' },
'flip-out-x': { 'backface-visibility': 'visible !important' },
'flip-out-y': { 'backface-visibility': 'visible !important' },
'rotate-in': { 'transform-origin': 'center' },
'rotate-in-down-left': { 'transform-origin': 'left bottom' },
'rotate-in-down-right': { 'transform-origin': 'right bottom' },
'rotate-in-up-left': { 'transform-origin': 'left bottom' },
'rotate-in-up-right': { 'transform-origin': 'right bottom' },
'rotate-out': { 'transform-origin': 'center' },
'rotate-out-down-left': { 'transform-origin': 'left bottom' },
'rotate-out-down-right': { 'transform-origin': 'right bottom' },
'rotate-out-up-left': { 'transform-origin': 'left bottom' },
'rotate-out-up-right': { 'transform-origin': 'right bottom' },
'hinge': { 'transform-origin': 'top left' },
'zoom-out-down': { 'transform-origin': 'center bottom' },
'zoom-out-left': { 'transform-origin': 'left center' },
'zoom-out-right': { 'transform-origin': 'right center' },
'zoom-out-up': { 'transform-origin': 'center bottom' },
},
counts: {
'spin': 'infinite',
'ping': 'infinite',
'pulse': 'infinite',
'pulse-alt': 'infinite',
'bounce': 'infinite',
'bounce-alt': 'infinite',
},
},
media: {
portrait: '(orientation: portrait)',
landscape: '(orientation: landscape)',
os_dark: '(prefers-color-scheme: dark)',
os_light: '(prefers-color-scheme: light)',
motion_ok: '(prefers-reduced-motion: no-preference)',
motion_not_ok: '(prefers-reduced-motion: reduce)',
high_contrast: '(prefers-contrast: high)',
low_contrast: '(prefers-contrast: low)',
opacity_ok: '(prefers-reduced-transparency: no-preference)',
opacity_not_ok: '(prefers-reduced-transparency: reduce)',
useData_ok: '(prefers-reduced-data: no-preference)',
useData_not_ok: '(prefers-reduced-data: reduce)',
touch: '(hover: none) and (pointer: coarse)',
stylus: '(hover: none) and (pointer: fine)',
pointer: '(hover) and (pointer: coarse)',
mouse: '(hover) and (pointer: fine)',
hd_color: '(dynamic-range: high)',
},
preflightBase: {
...transformBase,
...touchActionBase,
...scrollSnapTypeBase,
...fontVariantNumericBase,
...borderSpacingBase,
...boxShadowsBase,
...ringBase,
...filterBase,
...backdropFilterBase,
},
}