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

rendered animation

Only CSS: Swirl Transition

css6ssource ↗
1<div class="donuts"><div class="donuts_mask"><div class="step1">YUSUKE</div><div class="step2">NAKAYA</div></div><div class="donuts_mask"><div class="step1">YUSUKE</div><div class="step2">NAKAYA</div></div><div class="donuts_mask"><div class="step1">YUSUKE</div><div class="step2">NAKAYA</div></div><div class="donuts_mask"><div class="step1">YUSUKE</div><div class="step2">NAKAYA</div></div><div class="donuts_mask"><div class="step1">YUSUKE</div><div class="step2">NAKAYA</div></div><div class="donuts_mask"><div class="step1">YUSUKE</div><div class="step2">NAKAYA</div></div><div class="donuts_mask"><div class="step1">YUSUKE</div><div class="step2">NAKAYA</div></div><div class="donuts_mask"><div class="step1">YUSUKE</div><div class="step2">NAKAYA</div></div><div class="donuts_mask"><div class="step1">YUSUKE</div><div class="step2">NAKAYA</div></div><div class="donuts_mask"><div class="step1">YUSUKE</div><div class="step2">NAKAYA</div></div><div class="donuts_mask"><div class="step1">YUSUKE</div><div class="step2">NAKAYA</div></div><div class="donuts_mask"><div class="step1">YUSUKE</div><div class="step2">NAKAYA</div></div><div class="donuts_mask"><div class="step1">YUSUKE</div><div class="step2">NAKAYA</div></div><div class="donuts_mask"><div class="step1">YUSUKE</div><div class="step2">NAKAYA</div></div><div class="donuts_mask"><div class="step1">YUSUKE</div><div class="step2">NAKAYA</div></div><div class="donuts_mask"><div class="step1">YUSUKE</div><div class="step2">NAKAYA</div></div><div class="donuts_mask"><div class="step1">YUSUKE</div><div class="step2">NAKAYA</div></div><div class="donuts_mask"><div class="step1">YUSUKE</div><div class="step2">NAKAYA</div></div><div class="donuts_mask"><div class="step1">YUSUKE</div><div class="step2">NAKAYA</div></div><div class="donuts_mask"><div class="step1">YUSUKE</div><div class="step2">NAKAYA</div></div><div class="donuts_mask"><div class="step1">YUSUKE</div><div class="step2">NAKAYA</div></div><div class="donuts_mask"><div class="step1">YUSUKE</div><div class="step2">NAKAYA</div></div><div class="donuts_mask"><div class="step1">YUSUKE</div><div class="step2">NAKAYA</div></div><div class="donuts_mask"><div class="step1">YUSUKE</div><div class="step2">NAKAYA</div></div><div class="donuts_mask"><div class="step1">YUSUKE</div><div class="step2">NAKAYA</div></div><div class="donuts_mask"><div class="step1">YUSUKE</div><div class="step2">NAKAYA</div></div><div class="donuts_mask"><div class="step1">YUSUKE</div><div class="step2">NAKAYA</div></div><div class="donuts_mask"><div class="step1">YUSUKE</div><div class="step2">NAKAYA</div></div><div class="donuts_mask"><div class="step1">YUSUKE</div><div class="step2">NAKAYA</div></div><div class="donuts_mask"><div class="step1">YUSUKE</div><div class="step2">NAKAYA</div></div><div class="donuts_mask"><div class="step1">YUSUKE</div><div class="step2">NAKAYA</div></div><div class="donuts_mask"><div class="step1">YUSUKE</div><div class="step2">NAKAYA</div></div><div class="donuts_mask"><div class="step1">YUSUKE</div><div class="step2">NAKAYA</div></div><div class="donuts_mask"><div class="step1">YUSUKE</div><div class="step2">NAKAYA</div></div><div class="donuts_mask"><div class="step1">YUSUKE</div><div class="step2">NAKAYA</div></div><div class="donuts_mask"><div class="step1">YUSUKE</div><div class="step2">NAKAYA</div></div><div class="donuts_mask"><div class="step1">YUSUKE</div><div class="step2">NAKAYA</div></div><div class="donuts_mask"><div class="step1">YUSUKE</div><div class="step2">NAKAYA</div></div><div class="donuts_mask"><div class="step1">YUSUKE</div><div class="step2">NAKAYA</div></div><div class="donuts_mask"><div class="step1">YUSUKE</div><div class="step2">NAKAYA</div></div><div class="donuts_mask"><div class="step1">YUSUKE</div><div class="step2">NAKAYA</div></div><div class="donuts_mask"><div class="step1">YUSUKE</div><div class="step2">NAKAYA</div></div><div class="donuts_mask"><div class="step1">YUSUKE</div><div class="step2">NAKAYA</div></div><div class="donuts_mask"><div class="step1">YUSUKE</div><div class="step2">NAKAYA</div></div><div class="donuts_mask"><div class="step1">YUSUKE</div><div class="step2">NAKAYA</div></div><div class="donuts_mask"><div class="step1">YUSUKE</div><div class="step2">NAKAYA</div></div><div class="donuts_mask"><div class="step1">YUSUKE</div><div class="step2">NAKAYA</div></div><div class="donuts_mask"><div class="step1">YUSUKE</div><div class="step2">NAKAYA</div></div><div class="donuts_mask"><div class="step1">YUSUKE</div><div class="step2">NAKAYA</div></div><div class="donuts_mask"><div class="step1">YUSUKE</div><div class="step2">NAKAYA</div></div></div>