this repo has no description
1/* SVG Animation Package
2 * Hover animation for syui.ai icon
3 * Pure CSS - no JavaScript required
4 */
5
6:root {
7 --syui-color: #ef454a;
8 --particle-color: #ef454aba;
9 --explosion-color: #ef454a;
10}
11
12/* Core SVG button setup */
13.likeButton {
14 cursor: pointer;
15 display: inline-block;
16}
17
18/* Explosion circle - initially hidden */
19.likeButton .explosion {
20 transform-origin: center center;
21 transform: scale(1);
22 stroke: var(--explosion-color);
23 fill: none;
24 opacity: 0;
25 stroke-width: 1;
26}
27
28/* Particle layer - initially hidden */
29.likeButton .particleLayer {
30 opacity: 0;
31 transform: scale(0);
32}
33
34.likeButton .particleLayer circle {
35 opacity: 0;
36 transform-origin: center center;
37 transform: scale(0);
38}
39
40/* Syui logo */
41.likeButton .syui {
42 fill: var(--syui-color);
43 transform: scale(1);
44 transform-origin: center center;
45}
46
47/* Hover animations */
48.likeButton:hover .explosion {
49 animation: explosionAnime 800ms forwards;
50}
51
52.likeButton:hover .particleLayer {
53 animation: particleLayerAnime 800ms forwards;
54}
55
56.likeButton:hover .syui,
57.likeButton:hover path.syui {
58 animation: syuiDeluxeAnime 400ms forwards;
59}
60
61/* Individual particle animations on hover */
62.likeButton:hover .particleLayer circle:nth-child(1) { animation: particleAnimate1 800ms forwards; }
63.likeButton:hover .particleLayer circle:nth-child(2) { animation: particleAnimate2 800ms forwards; }
64.likeButton:hover .particleLayer circle:nth-child(3) { animation: particleAnimate3 800ms forwards; }
65.likeButton:hover .particleLayer circle:nth-child(4) { animation: particleAnimate4 800ms forwards; }
66.likeButton:hover .particleLayer circle:nth-child(5) { animation: particleAnimate5 800ms forwards; }
67.likeButton:hover .particleLayer circle:nth-child(6) { animation: particleAnimate6 800ms forwards; }
68.likeButton:hover .particleLayer circle:nth-child(7) { animation: particleAnimate7 800ms forwards; }
69.likeButton:hover .particleLayer circle:nth-child(8) { animation: particleAnimate8 800ms forwards; }
70.likeButton:hover .particleLayer circle:nth-child(9) { animation: particleAnimate9 800ms forwards; }
71.likeButton:hover .particleLayer circle:nth-child(10) { animation: particleAnimate10 800ms forwards; }
72.likeButton:hover .particleLayer circle:nth-child(11) { animation: particleAnimate11 800ms forwards; }
73.likeButton:hover .particleLayer circle:nth-child(12) { animation: particleAnimate12 800ms forwards; }
74.likeButton:hover .particleLayer circle:nth-child(13) { animation: particleAnimate13 800ms forwards; }
75.likeButton:hover .particleLayer circle:nth-child(14) { animation: particleAnimate14 800ms forwards; }
76
77/* Keyframe animations */
78@keyframes explosionAnime {
79 0% { opacity: 0; transform: scale(0.01); }
80 1% { opacity: 1; transform: scale(0.01); }
81 5% { stroke-width: 200; }
82 20% { stroke-width: 300; }
83 50% { stroke: var(--particle-color); transform: scale(1.1); stroke-width: 1; }
84 50.1% { stroke-width: 0; }
85 100% { stroke: var(--particle-color); transform: scale(1.1); stroke-width: 0; }
86}
87
88@keyframes particleLayerAnime {
89 0% { transform: translate(0, 0); opacity: 0; }
90 30% { opacity: 0; }
91 31% { opacity: 1; }
92 60% { transform: translate(0, 0); }
93 70% { opacity: 1; }
94 100% { opacity: 0; transform: translate(0, -20px); }
95}
96
97@keyframes syuiDeluxeAnime {
98 0% { fill: var(--syui-color); transform: scale(1) translate(0%, 0%); }
99 40% { fill: #ef454a66; transform: scale(1, 0.9) translate(-9%, 9%); }
100 50% { fill: #ef454ab3; transform: scale(1, 0.9) translate(-7%, 7%); }
101 60% { transform: scale(1) translate(-7%, 7%); }
102 70% { transform: scale(1.04) translate(-5%, 5%); }
103 80% { fill: #ef454a99; transform: scale(1.04) translate(-5%, 5%); }
104 90% { fill: #ff6b6b; transform: scale(1) translate(0%); }
105 100% { fill: var(--syui-color); transform: scale(1, 1) translate(0%, 0%); }
106}
107
108/* Individual particle keyframes */
109@keyframes particleAnimate1 {
110 0% { transform: translate(0, 0); }
111 30% { opacity: 1; transform: translate(0, 0); }
112 100% { opacity: 1; transform: translate(-16px, -59px); }
113}
114
115@keyframes particleAnimate2 {
116 0% { transform: translate(0, 0); }
117 30% { opacity: 1; transform: translate(0, 0); }
118 100% { opacity: 1; transform: translate(41px, 43px); }
119}
120
121@keyframes particleAnimate3 {
122 0% { transform: translate(0, 0); }
123 30% { opacity: 1; transform: translate(0, 0); }
124 100% { opacity: 1; transform: translate(50px, -48px); }
125}
126
127@keyframes particleAnimate4 {
128 0% { transform: translate(0, 0); }
129 30% { opacity: 1; transform: translate(0, 0); }
130 100% { opacity: 1; transform: translate(-39px, 36px); }
131}
132
133@keyframes particleAnimate5 {
134 0% { transform: translate(0, 0); }
135 30% { opacity: 1; transform: translate(0, 0); }
136 100% { opacity: 1; transform: translate(-39px, 32px); }
137}
138
139@keyframes particleAnimate6 {
140 0% { transform: translate(0, 0); }
141 30% { opacity: 1; transform: translate(0, 0); }
142 100% { opacity: 1; transform: translate(48px, 6px); }
143}
144
145@keyframes particleAnimate7 {
146 0% { transform: translate(0, 0); }
147 30% { opacity: 1; transform: translate(0, 0); }
148 100% { opacity: 1; transform: translate(-69px, -36px); }
149}
150
151@keyframes particleAnimate8 {
152 0% { transform: translate(0, 0); }
153 30% { opacity: 1; transform: translate(0, 0); }
154 100% { opacity: 1; transform: translate(-12px, -52px); }
155}
156
157@keyframes particleAnimate9 {
158 0% { transform: translate(0, 0); }
159 30% { opacity: 1; transform: translate(0, 0); }
160 100% { opacity: 1; transform: translate(-43px, -21px); }
161}
162
163@keyframes particleAnimate10 {
164 0% { transform: translate(0, 0); }
165 30% { opacity: 1; transform: translate(0, 0); }
166 100% { opacity: 1; transform: translate(-10px, 47px); }
167}
168
169@keyframes particleAnimate11 {
170 0% { transform: translate(0, 0); }
171 30% { opacity: 1; transform: translate(0, 0); }
172 100% { opacity: 1; transform: translate(66px, -9px); }
173}
174
175@keyframes particleAnimate12 {
176 0% { transform: translate(0, 0); }
177 30% { opacity: 1; transform: translate(0, 0); }
178 100% { opacity: 1; transform: translate(40px, -45px); }
179}
180
181@keyframes particleAnimate13 {
182 0% { transform: translate(0, 0); }
183 30% { opacity: 1; transform: translate(0, 0); }
184 100% { opacity: 1; transform: translate(29px, 24px); }
185}
186
187@keyframes particleAnimate14 {
188 0% { transform: translate(0, 0); }
189 30% { opacity: 1; transform: translate(0, 0); }
190 100% { opacity: 1; transform: translate(-10px, 50px); }
191}