Poof

.poof {
width: 128px;
height: 128px;
opacity: 0.6;
background-image: url('https://leonardofaria.net/wp-content/uploads/2024/03/poof.png');
background-position: 0 0;
background-repeat: repeat-x;
animation: poof ease-out 300ms, fade 600ms ease-out 200ms forwards;
}

@keyframes poof {
0% { background-position: 0 -512px; }
1% { background-position: 0 -512px; }
2% { background-position: 0 -512px; }
3% { background-position: 0 -512px; }
4% { background-position: 0 -512px; }
5% { background-position: 0 -512px; }
6% { background-position: 0 -512px; }
7% { background-position: 0 -512px; }
8% { background-position: 0 -512px; }
9% { background-position: 0 -512px; }
10% { background-position: 0 -512px; }
11% { background-position: 0 -512px; }
12% { background-position: 0 -512px; }
13% { background-position: 0 -512px; }
14% { background-position: 0 -512px; }
15% { background-position: 0 -512px; }
16% { background-position: 0 -512px; }
17% { background-position: 0 -512px; }
18% { background-position: 0 -512px; }
19% { background-position: 0 -512px; }
20% { background-position: 0 -384px; }
21% { background-position: 0 -384px; }
22% { background-position: 0 -384px; }
23% { background-position: 0 -384px; }
24% { background-position: 0 -384px; }
25% { background-position: 0 -384px; }
26% { background-position: 0 -384px; }
27% { background-position: 0 -384px; }
28% { background-position: 0 -384px; }
29% { background-position: 0 -384px; }
30% { background-position: 0 -384px; }
31% { background-position: 0 -384px; }
32% { background-position: 0 -384px; }
33% { background-position: 0 -384px; }
34% { background-position: 0 -384px; }
35% { background-position: 0 -384px; }
36% { background-position: 0 -384px; }
37% { background-position: 0 -384px; }
38% { background-position: 0 -384px; }
39% { background-position: 0 -384px; }
40% { background-position: 0 -256px; }
41% { background-position: 0 -256px; }
42% { background-position: 0 -256px; }
43% { background-position: 0 -256px; }
44% { background-position: 0 -256px; }
45% { background-position: 0 -256px; }
46% { background-position: 0 -256px; }
47% { background-position: 0 -256px; }
48% { background-position: 0 -256px; }
49% { background-position: 0 -256px; }
50% { background-position: 0 -256px; }
51% { background-position: 0 -256px; }
52% { background-position: 0 -256px; }
53% { background-position: 0 -256px; }
54% { background-position: 0 -256px; }
55% { background-position: 0 -256px; }
56% { background-position: 0 -256px; }
57% { background-position: 0 -256px; }
58% { background-position: 0 -256px; }
59% { background-position: 0 -256px; }
60% { background-position: 0 -128px; }
61% { background-position: 0 -128px; }
62% { background-position: 0 -128px; }
63% { background-position: 0 -128px; }
64% { background-position: 0 -128px; }
65% { background-position: 0 -128px; }
66% { background-position: 0 -128px; }
67% { background-position: 0 -128px; }
68% { background-position: 0 -128px; }
69% { background-position: 0 -128px; }
70% { background-position: 0 -128px; }
71% { background-position: 0 -128px; }
72% { background-position: 0 -128px; }
73% { background-position: 0 -128px; }
74% { background-position: 0 -128px; }
75% { background-position: 0 -128px; }
76% { background-position: 0 -128px; }
77% { background-position: 0 -128px; }
78% { background-position: 0 -128px; }
79% { background-position: 0 -128px; }
80% { background-position: 0 0; }
81% { background-position: 0 0; }
82% { background-position: 0 0; }
83% { background-position: 0 0; }
84% { background-position: 0 0; }
85% { background-position: 0 0; }
86% { background-position: 0 0; }
87% { background-position: 0 0; }
88% { background-position: 0 0; }
89% { background-position: 0 0; }
90% { background-position: 0 0; }
91% { background-position: 0 0; }
92% { background-position: 0 0; }
93% { background-position: 0 0; }
94% { background-position: 0 0; }
95% { background-position: 0 0; }
96% { background-position: 0 0; }
97% { background-position: 0 0; }
98% { background-position: 0 0; }
99% { background-position: 0 0; }
100% { background-position: 0 0; }  
}

@keyframes fade {
from { opacity: 0.6; }
to { opacity: 0; }
}