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-out": "fade-out .5s var(--ease-3)",
|
8 | "--animation-fade-out-@": `
|
9 | @keyframes fade-out {
|
10 | to { opacity: 0 }
|
11 | }`,
|
12 | "--animation-scale-up": "scale-up .5s var(--ease-3)",
|
13 | "--animation-scale-up-@": `
|
14 | @keyframes scale-up {
|
15 | to { transform: scale(1.25) }
|
16 | }`,
|
17 | "--animation-scale-down": "scale-down .5s var(--ease-3)",
|
18 | "--animation-scale-down-@": `
|
19 | @keyframes scale-down {
|
20 | to { transform: scale(.75) }
|
21 | }`,
|
22 | "--animation-slide-out-up": "slide-out-up .5s var(--ease-3)",
|
23 | "--animation-slide-out-up-@": `
|
24 | @keyframes slide-out-up {
|
25 | to { transform: translateY(-100%) }
|
26 | }`,
|
27 | "--animation-slide-out-down": "slide-out-down .5s var(--ease-3)",
|
28 | "--animation-slide-out-down-@": `
|
29 | @keyframes slide-out-down {
|
30 | to { transform: translateY(100%) }
|
31 | }`,
|
32 | "--animation-slide-out-right": "slide-out-right .5s var(--ease-3)",
|
33 | "--animation-slide-out-right-@": `
|
34 | @keyframes slide-out-right {
|
35 | to { transform: translateX(100%) }
|
36 | }`,
|
37 | "--animation-slide-out-left": "slide-out-left .5s var(--ease-3)",
|
38 | "--animation-slide-out-left-@": `
|
39 | @keyframes slide-out-left {
|
40 | to { transform: translateX(-100%) }
|
41 | }`,
|
42 | "--animation-slide-in-up": "slide-in-up .5s var(--ease-3)",
|
43 | "--animation-slide-in-up-@": `
|
44 | @keyframes slide-in-up {
|
45 | from { transform: translateY(100%) }
|
46 | }`,
|
47 | "--animation-slide-in-down": "slide-in-down .5s var(--ease-3)",
|
48 | "--animation-slide-in-down-@": `
|
49 | @keyframes slide-in-down {
|
50 | from { transform: translateY(-100%) }
|
51 | }`,
|
52 | "--animation-slide-in-right": "slide-in-right .5s var(--ease-3)",
|
53 | "--animation-slide-in-right-@": `
|
54 | @keyframes slide-in-right {
|
55 | from { transform: translateX(-100%) }
|
56 | }`,
|
57 | "--animation-slide-in-left": "slide-in-left .5s var(--ease-3)",
|
58 | "--animation-slide-in-left-@": `
|
59 | @keyframes slide-in-left {
|
60 | from { transform: translateX(100%) }
|
61 | }`,
|
62 | "--animation-shake-x": "shake-x .75s var(--ease-out-5)",
|
63 | "--animation-shake-x-@": `
|
64 | @keyframes shake-x {
|
65 | 0%, 100% { transform: translateX(0%) }
|
66 | 20% { transform: translateX(-5%) }
|
67 | 40% { transform: translateX(5%) }
|
68 | 60% { transform: translateX(-5%) }
|
69 | 80% { transform: translateX(5%) }
|
70 | }`,
|
71 | "--animation-shake-y": "shake-y .75s var(--ease-out-5)",
|
72 | "--animation-shake-y-@": `
|
73 | @keyframes shake-y {
|
74 | 0%, 100% { transform: translateY(0%) }
|
75 | 20% { transform: translateY(-5%) }
|
76 | 40% { transform: translateY(5%) }
|
77 | 60% { transform: translateY(-5%) }
|
78 | 80% { transform: translateY(5%) }
|
79 | }`,
|
80 | "--animation-spin": "spin 2s linear infinite",
|
81 | "--animation-spin-@": `
|
82 | @keyframes spin {
|
83 | to { transform: rotate(1turn) }
|
84 | }`,
|
85 | "--animation-ping": "ping 5s var(--ease-out-3) infinite",
|
86 | "--animation-ping-@": `
|
87 | @keyframes ping {
|
88 | 90%, 100% {
|
89 | transform: scale(2);
|
90 | opacity: 0;
|
91 | }
|
92 | }`,
|
93 | "--animation-blink": "blink 1s var(--ease-out-3) infinite",
|
94 | "--animation-blink-@": `
|
95 | @keyframes blink {
|
96 | 0%, 100% {
|
97 | opacity: 1
|
98 | }
|
99 | 50% {
|
100 | opacity: .5
|
101 | }
|
102 | }`,
|
103 | "--animation-float": "float 3s var(--ease-in-out-3) infinite",
|
104 | "--animation-float-@": `
|
105 | @keyframes float {
|
106 | 50% { transform: translateY(-25%) }
|
107 | }`,
|
108 | "--animation-bounce": "bounce 2s var(--ease-squish-2) infinite",
|
109 | "--animation-bounce-@": `
|
110 | @keyframes bounce {
|
111 | 25% { transform: translateY(-20%) }
|
112 | 40% { transform: translateY(-3%) }
|
113 | 0%, 60%, 100% { transform: translateY(0) }
|
114 | }`,
|
115 | "--animation-pulse": "pulse 2s var(--ease-out-3) infinite",
|
116 | "--animation-pulse-@": `
|
117 | @keyframes pulse {
|
118 | 50% { transform: scale(.9,.9) }
|
119 | }`,
|
120 | }
|