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

rendered animation

sproing

1html {
2  height: 100%;
3  background-image: radial-gradient(transparent 50%, purple 0, purple 60%, transparent 60%), radial-gradient(transparent 50%, purple 0, purple 60%, transparent 60%), radial-gradient(transparent 50%, purple 0, purple 60%, transparent 60%), radial-gradient(transparent 50%, purple 0, purple 60%, transparent 60%);
4  background-size: 200px 50px, 150px 50px, 100px 40px, 50px 20px;
5  background-position: 50% 50%, 50% 55%, 50% 60%, 50% 65%;
6  background-repeat: no-repeat;
7  animation: 2s bloomp infinite; }
8
9@keyframes bloomp {
10  50% {
11    background-position: 50% 55%, 50% 50%, 50% 45%, 50% 40%; } }
12