A music player that connects to your cloud/distributed storage.
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/* Default: animate the element itself */
9.animate-spin {
10 animation: var(--animate-spin);
11 display: inline-block;
12}
13
14/* When animate-spin is directly on a Phosphor <i>, animate ::before instead */
15i[class^="ph-"].animate-spin {
16 animation: none;
17}
18
19i[class^="ph-"].animate-spin::before {
20 display: inline-block;
21 animation: var(--animate-spin);
22 line-height: 0;
23 transform-origin: center;
24}
25
26/* When animate-spin is on a parent of a Phosphor <i>,
27 don't rotate the parent — rotate the icon's ::before instead */
28.animate-spin:has(> i[class^="ph-"]) {
29 animation: none;
30}
31
32.animate-spin > i[class^="ph-"]::before {
33 display: inline-block;
34 animation: var(--animate-spin);
35 line-height: 0;
36 transform-origin: center;
37}
38
39
40.animate-ping {
41 animation: var(--animate-ping);
42}
43
44.animate-pulse {
45 animation: var(--animate-pulse);
46}
47
48.animate-bounce {
49 animation: var(--animate-bounce);
50}
51
52@keyframes spin {
53 to {
54 transform: rotate(360deg);
55 }
56}
57
58@keyframes ping {
59 75%,
60 100% {
61 transform: scale(2);
62 opacity: 0;
63 }
64}
65
66@keyframes pulse {
67 50% {
68 opacity: 0.5;
69 }
70}
71
72@keyframes bounce {
73 0%,
74 100% {
75 transform: translateY(-25%);
76 animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
77 }
78 50% {
79 transform: none;
80 animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
81 }
82}