JavaScriptsrc/props.animations.js -rw-r--r-- 4.8 KiB
1export 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) }
12100% { 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) }
18100% { 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 {
28100% { 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 {
34100% { 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-shake-z": "shake-z 1s var(--ease-in-out-3)",
107"--animation-shake-z-@": `
108@keyframes shake-z {
109 0%, 100% { transform: rotate(0deg) }
110 20% { transform: rotate(-2deg) }
111 40% { transform: rotate(2deg) }
112 60% { transform: rotate(-2deg) }
113 80% { transform: rotate(2deg) }
114}`,
115 "--animation-spin": "spin 2s linear infinite",
116 "--animation-spin-@": `
117@keyframes spin {
118 to { transform: rotate(1turn) }
119}`,
120 "--animation-ping": "ping 5s var(--ease-out-3) infinite",
121 "--animation-ping-@": `
122@keyframes ping {
123 90%, 100% {
124 transform: scale(2);
125 opacity: 0;
126 }
127}`,
128 "--animation-blink": "blink 1s var(--ease-out-3) infinite",
129 "--animation-blink-@": `
130@keyframes blink {
131 0%, 100% {
132 opacity: 1
133 }
134 50% {
135 opacity: .5
136 }
137}`,
138 "--animation-float": "float 3s var(--ease-in-out-3) infinite",
139 "--animation-float-@": `
140@keyframes float {
141 50% { transform: translateY(-25%) }
142}`,
143 "--animation-bounce": "bounce 2s var(--ease-squish-2) infinite",
144 "--animation-bounce-@": `
145@keyframes bounce {
146 25% { transform: translateY(-20%) }
147 40% { transform: translateY(-3%) }
148 0%, 60%, 100% { transform: translateY(0) }
149}`,
150 "--animation-pulse": "pulse 2s var(--ease-out-3) infinite",
151 "--animation-pulse-@": `
152@keyframes pulse {
153 50% { transform: scale(.9,.9) }
154}`,
155}