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

rendered animation

Only CSS: Valentine is coming

1<div id="chocolate_rains"><div class="heart"><div class="ring"></div><div class="inner"><div class="regular"><div class="movable"><div class="left"></div><div class="right"></div></div></div><div class="reverse"><div class="movable"><div class="left"></div><div class="right"></div></div></div></div></div><div class="heart"><div class="ring"></div><div class="inner"><div class="regular"><div class="movable"><div class="left"></div><div class="right"></div></div></div><div class="reverse"><div class="movable"><div class="left"></div><div class="right"></div></div></div></div></div><div class="heart"><div class="ring"></div><div class="inner"><div class="regular"><div class="movable"><div class="left"></div><div class="right"></div></div></div><div class="reverse"><div class="movable"><div class="left"></div><div class="right"></div></div></div></div></div><div class="heart"><div class="ring"></div><div class="inner"><div class="regular"><div class="movable"><div class="left"></div><div class="right"></div></div></div><div class="reverse"><div class="movable"><div class="left"></div><div class="right"></div></div></div></div></div><div class="heart"><div class="ring"></div><div class="inner"><div class="regular"><div class="movable"><div class="left"></div><div class="right"></div></div></div><div class="reverse"><div class="movable"><div class="left"></div><div class="right"></div></div></div></div></div><div class="heart"><div class="ring"></div><div class="inner"><div class="regular"><div class="movable"><div class="left"></div><div class="right"></div></div></div><div class="reverse"><div class="movable"><div class="left"></div><div class="right"></div></div></div></div></div><div class="heart"><div class="ring"></div><div class="inner"><div class="regular"><div class="movable"><div class="left"></div><div class="right"></div></div></div><div class="reverse"><div class="movable"><div class="left"></div><div class="right"></div></div></div></div></div><div class="heart"><div class="ring"></div><div class="inner"><div class="regular"><div class="movable"><div class="left"></div><div class="right"></div></div></div><div class="reverse"><div class="movable"><div class="left"></div><div class="right"></div></div></div></div></div><div class="heart"><div class="ring"></div><div class="inner"><div class="regular"><div class="movable"><div class="left"></div><div class="right"></div></div></div><div class="reverse"><div class="movable"><div class="left"></div><div class="right"></div></div></div></div></div><div class="heart"><div class="ring"></div><div class="inner"><div class="regular"><div class="movable"><div class="left"></div><div class="right"></div></div></div><div class="reverse"><div class="movable"><div class="left"></div><div class="right"></div></div></div></div></div><div class="heart"><div class="ring"></div><div class="inner"><div class="regular"><div class="movable"><div class="left"></div><div class="right"></div></div></div><div class="reverse"><div class="movable"><div class="left"></div><div class="right"></div></div></div></div></div><div class="heart"><div class="ring"></div><div class="inner"><div class="regular"><div class="movable"><div class="left"></div><div class="right"></div></div></div><div class="reverse"><div class="movable"><div class="left"></div><div class="right"></div></div></div></div></div><div class="heart"><div class="ring"></div><div class="inner"><div class="regular"><div class="movable"><div class="left"></div><div class="right"></div></div></div><div class="reverse"><div class="movable"><div class="left"></div><div class="right"></div></div></div></div></div><div class="heart"><div class="ring"></div><div class="inner"><div class="regular"><div class="movable"><div class="left"></div><div class="right"></div></div></div><div class="reverse"><div class="movable"><div class="left"></div><div class="right"></div></div></div></div></div><div class="heart"><div class="ring"></div><div class="inner"><div class="regular"><div class="movable"><div class="left"></div><div class="right"></div></div></div><div class="reverse"><div class="movable"><div class="left"></div><div class="right"></div></div></div></div></div><div class="heart"><div class="ring"></div><div class="inner"><div class="regular"><div class="movable"><div class="left"></div><div class="right"></div></div></div><div class="reverse"><div class="movable"><div class="left"></div><div class="right"></div></div></div></div></div><div class="heart"><div class="ring"></div><div class="inner"><div class="regular"><div class="movable"><div class="left"></div><div class="right"></div></div></div><div class="reverse"><div class="movable"><div class="left"></div><div class="right"></div></div></div></div></div><div class="heart"><div class="ring"></div><div class="inner"><div class="regular"><div class="movable"><div class="left"></div><div class="right"></div></div></div><div class="reverse"><div class="movable"><div class="left"></div><div class="right"></div></div></div></div></div><div class="heart"><div class="ring"></div><div class="inner"><div class="regular"><div class="movable"><div class="left"></div><div class="right"></div></div></div><div class="reverse"><div class="movable"><div class="left"></div><div class="right"></div></div></div></div></div><div class="heart"><div class="ring"></div><div class="inner"><div class="regular"><div class="movable"><div class="left"></div><div class="right"></div></div></div><div class="reverse"><div class="movable"><div class="left"></div><div class="right"></div></div></div></div></div><div class="heart"><div class="ring"></div><div class="inner"><div class="regular"><div class="movable"><div class="left"></div><div class="right"></div></div></div><div class="reverse"><div class="movable"><div class="left"></div><div class="right"></div></div></div></div></div><div class="heart"><div class="ring"></div><div class="inner"><div class="regular"><div class="movable"><div class="left"></div><div class="right"></div></div></div><div class="reverse"><div class="movable"><div class="left"></div><div class="right"></div></div></div></div></div><div class="heart"><div class="ring"></div><div class="inner"><div class="regular"><div class="movable"><div class="left"></div><div class="right"></div></div></div><div class="reverse"><div class="movable"><div class="left"></div><div class="right"></div></div></div></div></div><div class="heart"><div class="ring"></div><div class="inner"><div class="regular"><div class="movable"><div class="left"></div><div class="right"></div></div></div><div class="reverse"><div class="movable"><div class="left"></div><div class="right"></div></div></div></div></div><div class="heart"><div class="ring"></div><div class="inner"><div class="regular"><div class="movable"><div class="left"></div><div class="right"></div></div></div><div class="reverse"><div class="movable"><div class="left"></div><div class="right"></div></div></div></div></div><div class="heart"><div class="ring"></div><div class="inner"><div class="regular"><div class="movable"><div class="left"></div><div class="right"></div></div></div><div class="reverse"><div class="movable"><div class="left"></div><div class="right"></div></div></div></div></div><div class="heart"><div class="ring"></div><div class="inner"><div class="regular"><div class="movable"><div class="left"></div><div class="right"></div></div></div><div class="reverse"><div class="movable"><div class="left"></div><div class="right"></div></div></div></div></div><div class="heart"><div class="ring"></div><div class="inner"><div class="regular"><div class="movable"><div class="left"></div><div class="right"></div></div></div><div class="reverse"><div class="movable"><div class="left"></div><div class="right"></div></div></div></div></div><div class="heart"><div class="ring"></div><div class="inner"><div class="regular"><div class="movable"><div class="left"></div><div class="right"></div></div></div><div class="reverse"><div class="movable"><div class="left"></div><div class="right"></div></div></div></div></div><div class="heart"><div class="ring"></div><div class="inner"><div class="regular"><div class="movable"><div class="left"></div><div class="right"></div></div></div><div class="reverse"><div class="movable"><div class="left"></div><div class="right"></div></div></div></div></div></div>