animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back

rendered animation

Particle Burst

1<div class="particle"></div>
2<div class="particle"></div>
3<div class="particle"></div>
4<div class="particle"></div>
5<div class="particle"></div>
6<div class="particle"></div>
7<div class="particle"></div>
8<div class="particle"></div>
9<div class="particle"></div>
10<div class="particle"></div>
11<div class="particle"></div>
12<div class="particle"></div>
13<div class="particle"></div>
14<div class="particle"></div>
15<div class="particle"></div>
16<div class="particle"></div>
17<div class="particle"></div>
18<div class="particle"></div>
19<div class="particle"></div>
20<div class="particle"></div>
21<div class="particle"></div>
22<div class="particle"></div>
23<div class="particle"></div>
24<div class="particle"></div>
25<div class="particle"></div>
26<div class="particle"></div>
27<div class="particle"></div>
28<div class="particle"></div>
29<div class="particle"></div>
30<div class="particle"></div>
31<div class="particle"></div>
32<div class="particle"></div>
33<div class="particle"></div>
34<div class="particle"></div>
35<div class="particle"></div>
36<div class="particle"></div>
37<div class="particle"></div>
38<div class="particle"></div>
39<div class="particle"></div>
40<div class="particle"></div>
41<div class="particle"></div>
42<div class="particle"></div>
43<div class="particle"></div>
44<div class="particle"></div>
45<div class="particle"></div>
46<div class="particle"></div>
47<div class="particle"></div>
48<div class="particle"></div>
49<div class="particle"></div>
50<div class="particle"></div>
51<div class="particle"></div>
52<div class="particle"></div>
53<div class="particle"></div>
54<div class="particle"></div>
55<div class="particle"></div>
56<div class="particle"></div>
57<div class="particle"></div>
58<div class="particle"></div>
59<div class="particle"></div>
60<div class="particle"></div>
61<div class="particle"></div>
62<div class="particle"></div>
63<div class="particle"></div>
64<div class="particle"></div>
65<div class="particle"></div>
66<div class="particle"></div>
67<div class="particle"></div>
68<div class="particle"></div>
69<div class="particle"></div>
70<div class="particle"></div>
71<div class="particle"></div>
72<div class="particle"></div>
73<div class="particle"></div>
74<div class="particle"></div>
75<div class="particle"></div>
76<div class="particle"></div>
77<div class="particle"></div>
78<div class="particle"></div>
79<div class="particle"></div>
80<div class="particle"></div>
81<div class="particle"></div>
82<div class="particle"></div>
83<div class="particle"></div>
84<div class="particle"></div>
85<div class="particle"></div>
86<div class="particle"></div>
87<div class="particle"></div>
88<div class="particle"></div>
89<div class="particle"></div>
90<div class="particle"></div>
91<div class="particle"></div>
92<div class="particle"></div>
93<div class="particle"></div>
94<div class="particle"></div>
95<div class="particle"></div>
96<div class="particle"></div>
97<div class="particle"></div>
98<div class="particle"></div>
99<div class="particle"></div>
100<div class="particle"></div>
101<div class="particle"></div>
102<div class="particle"></div>
103<div class="particle"></div>
104<div class="particle"></div>
105<div class="particle"></div>
106<div class="particle"></div>
107<div class="particle"></div>
108<div class="particle"></div>
109<div class="particle"></div>
110<div class="particle"></div>
111<div class="particle"></div>
112<div class="particle"></div>
113<div class="particle"></div>
114<div class="particle"></div>
115<div class="particle"></div>
116<div class="particle"></div>
117<div class="particle"></div>
118<div class="particle"></div>
119<div class="particle"></div>
120<div class="particle"></div>
121<div class="particle"></div>
122<div class="particle"></div>
123<div class="particle"></div>
124<div class="particle"></div>
125<div class="particle"></div>
126<div class="particle"></div>
127<div class="particle"></div>
128<div class="particle"></div>
129<div class="particle"></div>
130<div class="particle"></div>
131<div class="particle"></div>
132<div class="particle"></div>
133<div class="particle"></div>
134<div class="particle"></div>
135<div class="particle"></div>
136<div class="particle"></div>
137<div class="particle"></div>
138<div class="particle"></div>
139<div class="particle"></div>
140<div class="particle"></div>
141<div class="particle"></div>
142<div class="particle"></div>
143<div class="particle"></div>
144<div class="particle"></div>
145<div class="particle"></div>
146<div class="particle"></div>
147<div class="particle"></div>
148<div class="particle"></div>
149<div class="particle"></div>
150<div class="particle"></div>
151<div class="particle"></div>
152<div class="particle"></div>
153<div class="particle"></div>
154<div class="particle"></div>
155<div class="particle"></div>
156<div class="particle"></div>
157<div class="particle"></div>
158<div class="particle"></div>
159<div class="particle"></div>
160<div class="particle"></div>
161<div class="particle"></div>
162<div class="particle"></div>
163<div class="particle"></div>
164<div class="particle"></div>
165<div class="particle"></div>
166<div class="particle"></div>
167<div class="particle"></div>
168<div class="particle"></div>
169<div class="particle"></div>
170<div class="particle"></div>
171<div class="particle"></div>
172<div class="particle"></div>
173<div class="particle"></div>
174<div class="particle"></div>
175<div class="particle"></div>
176<div class="particle"></div>
177<div class="particle"></div>
178<div class="particle"></div>
179<div class="particle"></div>
180<div class="particle"></div>
181<div class="particle"></div>
182<div class="particle"></div>
183<div class="particle"></div>
184<div class="particle"></div>
185<div class="particle"></div>
186<div class="particle"></div>
187<div class="particle"></div>
188<div class="particle"></div>
189<div class="particle"></div>
190<div class="particle"></div>
191<div class="particle"></div>
192<div class="particle"></div>
193<div class="particle"></div>
194<div class="particle"></div>
195<div class="particle"></div>
196<div class="particle"></div>
197<div class="particle"></div>
198<div class="particle"></div>
199<div class="particle"></div>
200<div class="particle"></div>
201<div class="particle"></div>
202<div class="particle"></div>
203<div class="particle"></div>
204<div class="particle"></div>
205<div class="particle"></div>
206<div class="particle"></div>
207<div class="particle"></div>
208<div class="particle"></div>
209<div class="particle"></div>
210<div class="particle"></div>
211<div class="particle"></div>
212<div class="particle"></div>
213<div class="particle"></div>
214<div class="particle"></div>
215<div class="particle"></div>
216<div class="particle"></div>
217<div class="particle"></div>
218<div class="particle"></div>
219<div class="particle"></div>
220<div class="particle"></div>
221<div class="particle"></div>
222<div class="particle"></div>
223<div class="particle"></div>
224<div class="particle"></div>
225<div class="particle"></div>
226<div class="particle"></div>
227<div class="particle"></div>
228<div class="particle"></div>
229<div class="particle"></div>
230<div class="particle"></div>
231<div class="particle"></div>
232<div class="particle"></div>
233<div class="particle"></div>
234<div class="particle"></div>
235<div class="particle"></div>
236<div class="particle"></div>
237<div class="particle"></div>
238<div class="particle"></div>
239<div class="particle"></div>
240<div class="particle"></div>
241<div class="particle"></div>
242<div class="particle"></div>
243<div class="particle"></div>
244<div class="particle"></div>
245<div class="particle"></div>
246<div class="particle"></div>
247<div class="particle"></div>
248<div class="particle"></div>
249<div class="particle"></div>
250<div class="particle"></div>
251<div class="particle"></div>
252<div class="particle"></div>
253<div class="particle"></div>
254<div class="particle"></div>
255<div class="particle"></div>
256<div class="particle"></div>
257<div class="particle"></div>
258<div class="particle"></div>
259<div class="particle"></div>
260<div class="particle"></div>
261<div class="particle"></div>
262<div class="particle"></div>
263<div class="particle"></div>
264<div class="particle"></div>
265<div class="particle"></div>
266<div class="particle"></div>
267<div class="particle"></div>
268<div class="particle"></div>
269<div class="particle"></div>
270<div class="particle"></div>
271<div class="particle"></div>
272<div class="particle"></div>
273<div class="particle"></div>
274<div class="particle"></div>
275<div class="particle"></div>
276<div class="particle"></div>
277<div class="particle"></div>
278<div class="particle"></div>
279<div class="particle"></div>
280<div class="particle"></div>
281<div class="particle"></div>
282<div class="particle"></div>
283<div class="particle"></div>
284<div class="particle"></div>
285<div class="particle"></div>
286<div class="particle"></div>
287<div class="particle"></div>
288<div class="particle"></div>
289<div class="particle"></div>
290<div class="particle"></div>
291<div class="particle"></div>
292<div class="particle"></div>
293<div class="particle"></div>
294<div class="particle"></div>
295<div class="particle"></div>
296<div class="particle"></div>
297<div class="particle"></div>
298<div class="particle"></div>
299<div class="particle"></div>
300<div class="particle"></div>
301<div class="particle"></div>
302<div class="particle"></div>
303<div class="particle"></div>
304<div class="particle"></div>
305<div class="particle"></div>
306<div class="particle"></div>
307<div class="particle"></div>
308<div class="particle"></div>
309<div class="particle"></div>
310<div class="particle"></div>
311<div class="particle"></div>
312<div class="particle"></div>
313<div class="particle"></div>
314<div class="particle"></div>
315<div class="particle"></div>
316<div class="particle"></div>
317<div class="particle"></div>
318<div class="particle"></div>
319<div class="particle"></div>
320<div class="particle"></div>
321<div class="particle"></div>
322<div class="particle"></div>
323<div class="particle"></div>
324<div class="particle"></div>
325<div class="particle"></div>
326<div class="particle"></div>
327<div class="particle"></div>
328<div class="particle"></div>
329<div class="particle"></div>
330<div class="particle"></div>
331<div class="particle"></div>
332<div class="particle"></div>
333<div class="particle"></div>
334<div class="particle"></div>
335<div class="particle"></div>
336<div class="particle"></div>
337<div class="particle"></div>
338<div class="particle"></div>
339<div class="particle"></div>
340<div class="particle"></div>
341<div class="particle"></div>
342<div class="particle"></div>
343<div class="particle"></div>
344<div class="particle"></div>
345<div class="particle"></div>
346<div class="particle"></div>
347<div class="particle"></div>
348<div class="particle"></div>
349<div class="particle"></div>
350<div class="particle"></div>
351<div class="particle"></div>
352<div class="particle"></div>
353<div class="particle"></div>
354<div class="particle"></div>
355<div class="particle"></div>
356<div class="particle"></div>
357<div class="particle"></div>
358<div class="particle"></div>
359<div class="particle"></div>
360<div class="particle"></div>
361<div class="particle"></div>
362<div class="particle"></div>
363<div class="particle"></div>
364<div class="particle"></div>
365<div class="particle"></div>
366<div class="particle"></div>
367<div class="particle"></div>
368<div class="particle"></div>
369<div class="particle"></div>
370<div class="particle"></div>
371<div class="particle"></div>
372<div class="particle"></div>
373<div class="particle"></div>
374<div class="particle"></div>
375<div class="particle"></div>
376<div class="particle"></div>
377<div class="particle"></div>
378<div class="particle"></div>
379<div class="particle"></div>
380<div class="particle"></div>
381<div class="particle"></div>
382<div class="particle"></div>
383<div class="particle"></div>
384<div class="particle"></div>
385<div class="particle"></div>
386<div class="particle"></div>
387<div class="particle"></div>
388<div class="particle"></div>
389<div class="particle"></div>
390<div class="particle"></div>
391<div class="particle"></div>
392<div class="particle"></div>
393<div class="particle"></div>
394<div class="particle"></div>
395<div class="particle"></div>
396<div class="particle"></div>
397<div class="particle"></div>
398<div class="particle"></div>
399<div class="particle"></div>
400<div class="particle"></div>
401<div class="particle"></div>
402<div class="particle"></div>
403<div class="particle"></div>
404<div class="particle"></div>
405<div class="particle"></div>
406<div class="particle"></div>
407<div class="particle"></div>
408<div class="particle"></div>
409<div class="particle"></div>
410<div class="particle"></div>
411<div class="particle"></div>
412<div class="particle"></div>
413<div class="particle"></div>
414<div class="particle"></div>
415<div class="particle"></div>
416<div class="particle"></div>
417<div class="particle"></div>
418<div class="particle"></div>
419<div class="particle"></div>
420<div class="particle"></div>
421<div class="particle"></div>
422<div class="particle"></div>
423<div class="particle"></div>
424<div class="particle"></div>
425<div class="particle"></div>
426<div class="particle"></div>
427<div class="particle"></div>
428<div class="particle"></div>
429<div class="particle"></div>
430<div class="particle"></div>
431<div class="particle"></div>
432<div class="particle"></div>
433<div class="particle"></div>
434<div class="particle"></div>
435<div class="particle"></div>
436<div class="particle"></div>
437<div class="particle"></div>
438<div class="particle"></div>
439<div class="particle"></div>
440<div class="particle"></div>
441<div class="particle"></div>
442<div class="particle"></div>
443<div class="particle"></div>
444<div class="particle"></div>
445<div class="particle"></div>
446<div class="particle"></div>
447<div class="particle"></div>
448<div class="particle"></div>
449<div class="particle"></div>
450<div class="particle"></div>
451<div class="particle"></div>
452<div class="particle"></div>
453<div class="particle"></div>
454<div class="particle"></div>
455<div class="particle"></div>
456<div class="particle"></div>
457<div class="particle"></div>
458<div class="particle"></div>
459<div class="particle"></div>
460<div class="particle"></div>
461<div class="particle"></div>
462<div class="particle"></div>
463<div class="particle"></div>
464<div class="particle"></div>
465<div class="particle"></div>
466<div class="particle"></div>
467<div class="particle"></div>
468<div class="particle"></div>
469<div class="particle"></div>
470<div class="particle"></div>
471<div class="particle"></div>
472<div class="particle"></div>
473<div class="particle"></div>
474<div class="particle"></div>
475<div class="particle"></div>
476<div class="particle"></div>
477<div class="particle"></div>
478<div class="particle"></div>
479<div class="particle"></div>
480<div class="particle"></div>
481<div class="particle"></div>
482<div class="particle"></div>
483<div class="particle"></div>
484<div class="particle"></div>
485<div class="particle"></div>
486<div class="particle"></div>
487<div class="particle"></div>
488<div class="particle"></div>
489<div class="particle"></div>
490<div class="particle"></div>
491<div class="particle"></div>
492<div class="particle"></div>
493<div class="particle"></div>
494<div class="particle"></div>
495<div class="particle"></div>
496<div class="particle"></div>
497<div class="particle"></div>
498<div class="particle"></div>
499<div class="particle"></div>
500<div class="particle"></div>