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

rendered animation

ripple

1html {
2  height: 100%;
3  min-height: 500px;
4  background-color: #b81414;
5  background-image: radial-gradient(circle, transparent 40%, #999 40%, #999 41%, transparent 0), radial-gradient(circle, transparent 40%, #999 40%, #999 41%, transparent 0), radial-gradient(circle, transparent 40%, #999 40%, #999 41%, transparent 0), radial-gradient(circle, transparent 40%, #999 40%, #999 41%, transparent 0), radial-gradient(circle, transparent 40%, #999 40%, #999 41%, transparent 0), radial-gradient(circle, transparent 40%, #999 40%, #999 41%, transparent 0), radial-gradient(circle, transparent 40%, #999 40%, #999 41%, transparent 0);
6  background-position: 50% 50%;
7  background-size: 200% 200%, 150% 150%, 100% 100%, 60% 60%, 40% 40%, 20% 20%, 5% 5%;
8  background-repeat: no-repeat;
9  animation: 1s impact linear infinite; }
10
11@keyframes impact {
12  0% {
13    background-size: 200% 200%, 150% 150%, 100% 100%, 60% 60%, 40% 40%, 20% 20%, 5% 5%; }
14  100% {
15    background-size: 250% 250%, 200% 200%, 150% 150%, 100% 100%, 60% 60%, 40% 40%, 20% 20%; } }
16