CSSsrc/props.animations.css -rw-r--r-- 3.9 KiB
1@import 'props.media.css';
2
3:where(html) {
4 --animation-fade-in: fade-in .5s var(--ease-3);
5 --animation-fade-in-bloom: fade-in-bloom 2s var(--ease-3);
6 --animation-fade-out: fade-out .5s var(--ease-3);
7 --animation-fade-out-bloom: fade-out-bloom 2s var(--ease-3);
8 --animation-scale-up: scale-up .5s var(--ease-3);
9 --animation-scale-down: scale-down .5s var(--ease-3);
10 --animation-slide-out-up: slide-out-up .5s var(--ease-3);
11 --animation-slide-out-down: slide-out-down .5s var(--ease-3);
12 --animation-slide-out-right: slide-out-right .5s var(--ease-3);
13 --animation-slide-out-left: slide-out-left .5s var(--ease-3);
14 --animation-slide-in-up: slide-in-up .5s var(--ease-3);
15 --animation-slide-in-down: slide-in-down .5s var(--ease-3);
16 --animation-slide-in-right: slide-in-right .5s var(--ease-3);
17 --animation-slide-in-left: slide-in-left .5s var(--ease-3);
18 --animation-shake-x: shake-x .75s var(--ease-out-5);
19 --animation-shake-y: shake-y .75s var(--ease-out-5);
20 --animation-shake-z: shake-z 1s var(--ease-in-out-3);
21 --animation-spin: spin 2s linear infinite;
22 --animation-ping: ping 5s var(--ease-out-3) infinite;
23 --animation-blink: blink 1s var(--ease-out-3) infinite;
24 --animation-float: float 3s var(--ease-in-out-3) infinite;
25 --animation-bounce: bounce 2s var(--ease-squish-2) infinite;
26 --animation-pulse: pulse 2s var(--ease-out-3) infinite;
27}
28
29@keyframes fade-in {
30 to { opacity: 1 }
31}
32@keyframes fade-in-bloom {
33 0% { opacity: 0; filter: brightness(1) blur(20px) }
34 10% { opacity: 1; filter: brightness(2) blur(10px) }
35100% { opacity: 1; filter: brightness(1) blur(0) }
36}
37@keyframes fade-out {
38 to { opacity: 0 }
39}
40@keyframes fade-out-bloom {
41100% { opacity: 0; filter: brightness(1) blur(20px) }
42 10% { opacity: 1; filter: brightness(2) blur(10px) }
43 0% { opacity: 1; filter: brightness(1) blur(0) }
44}
45@keyframes scale-up {
46 to { transform: scale(1.25) }
47}
48@keyframes scale-down {
49 to { transform: scale(.75) }
50}
51@keyframes slide-out-up {
52 to { transform: translateY(-100%) }
53}
54@keyframes slide-out-down {
55 to { transform: translateY(100%) }
56}
57@keyframes slide-out-right {
58 to { transform: translateX(100%) }
59}
60@keyframes slide-out-left {
61 to { transform: translateX(-100%) }
62}
63@keyframes slide-in-up {
64 from { transform: translateY(100%) }
65}
66@keyframes slide-in-down {
67 from { transform: translateY(-100%) }
68}
69@keyframes slide-in-right {
70 from { transform: translateX(-100%) }
71}
72@keyframes slide-in-left {
73 from { transform: translateX(100%) }
74}
75@keyframes shake-x {
76 0%, 100% { transform: translateX(0%) }
77 20% { transform: translateX(-5%) }
78 40% { transform: translateX(5%) }
79 60% { transform: translateX(-5%) }
80 80% { transform: translateX(5%) }
81}
82@keyframes shake-y {
83 0%, 100% { transform: translateY(0%) }
84 20% { transform: translateY(-5%) }
85 40% { transform: translateY(5%) }
86 60% { transform: translateY(-5%) }
87 80% { transform: translateY(5%) }
88}
89@keyframes shake-z {
90 0%, 100% { transform: rotate(0deg) }
91 20% { transform: rotate(-2deg) }
92 40% { transform: rotate(2deg) }
93 60% { transform: rotate(-2deg) }
94 80% { transform: rotate(2deg) }
95}
96@keyframes spin {
97 to { transform: rotate(1turn) }
98}
99@keyframes ping {
100 90%, 100% {
101 transform: scale(2);
102 opacity: 0;
103 }
104}
105@keyframes blink {
106 0%, 100% {
107 opacity: 1
108 }
109 50% {
110 opacity: .5
111 }
112}
113@keyframes float {
114 50% { transform: translateY(-25%) }
115}
116@keyframes bounce {
117 25% { transform: translateY(-20%) }
118 40% { transform: translateY(-3%) }
119 0%, 60%, 100% { transform: translateY(0) }
120}
121@keyframes pulse {
122 50% { transform: scale(.9,.9) }
123}
124@media (--OSdark) {
125 @keyframes fade-in-bloom {
126 0% { opacity: 0; filter: brightness(1) blur(20px) }
127 10% { opacity: 1; filter: brightness(0.5) blur(10px) }
128 100% { opacity: 1; filter: brightness(1) blur(0) }
129 }
130}
131@media (--OSdark) {
132 @keyframes fade-out-bloom {
133 100% { opacity: 0; filter: brightness(1) blur(20px) }
134 10% { opacity: 1; filter: brightness(0.5) blur(10px) }
135 0% { opacity: 1; filter: brightness(1) blur(0) }
136 }
137}