1:root {
2 --animate-spin: spin 1s linear infinite;
3 --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
4 --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
5 --animate-bounce: bounce 1s infinite;
6}
7
8.animate-spin {
9 animation: var(--animate-spin);
10}
11
12.animate-ping {
13 animation: var(--animate-ping);
14}
15
16.animate-pulse {
17 animation: var(--animate-pulse);
18}
19
20.animate-bounce {
21 animation: var(--animate-bounce);
22}
23
24@keyframes spin {
25 to {
26 transform: rotate(360deg);
27 }
28}
29
30@keyframes ping {
31 75%,
32 100% {
33 transform: scale(2);
34 opacity: 0;
35 }
36}
37
38@keyframes pulse {
39 50% {
40 opacity: 0.5;
41 }
42}
43
44@keyframes bounce {
45 0%,
46 100% {
47 transform: translateY(-25%);
48 animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
49 }
50 50% {
51 transform: none;
52 animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
53 }
54}