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

rendered animation

Only CSS: 和嵐 -Autumn-

1<div id="autumn"><ol class="maples"><li class="maple"><ol class="leaves"><li class="leave_wrapper"><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div></li></ol></li><li class="maple"><ol class="leaves"><li class="leave_wrapper"><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div></li></ol></li><li class="maple"><ol class="leaves"><li class="leave_wrapper"><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div></li></ol></li><li class="maple"><ol class="leaves"><li class="leave_wrapper"><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div></li></ol></li><li class="maple"><ol class="leaves"><li class="leave_wrapper"><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div></li></ol></li><li class="maple"><ol class="leaves"><li class="leave_wrapper"><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div></li></ol></li><li class="maple"><ol class="leaves"><li class="leave_wrapper"><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div></li></ol></li><li class="maple"><ol class="leaves"><li class="leave_wrapper"><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div></li></ol></li><li class="maple"><ol class="leaves"><li class="leave_wrapper"><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div></li></ol></li><li class="maple"><ol class="leaves"><li class="leave_wrapper"><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div></li></ol></li><li class="maple"><ol class="leaves"><li class="leave_wrapper"><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div></li></ol></li><li class="maple"><ol class="leaves"><li class="leave_wrapper"><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div></li></ol></li><li class="maple"><ol class="leaves"><li class="leave_wrapper"><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div></li></ol></li><li class="maple"><ol class="leaves"><li class="leave_wrapper"><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div></li></ol></li><li class="maple"><ol class="leaves"><li class="leave_wrapper"><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div></li></ol></li><li class="maple"><ol class="leaves"><li class="leave_wrapper"><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div></li></ol></li><li class="maple"><ol class="leaves"><li class="leave_wrapper"><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div></li></ol></li><li class="maple"><ol class="leaves"><li class="leave_wrapper"><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div></li></ol></li><li class="maple"><ol class="leaves"><li class="leave_wrapper"><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div></li></ol></li><li class="maple"><ol class="leaves"><li class="leave_wrapper"><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div></li></ol></li><li class="maple"><ol class="leaves"><li class="leave_wrapper"><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div></li></ol></li><li class="maple"><ol class="leaves"><li class="leave_wrapper"><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div></li></ol></li><li class="maple"><ol class="leaves"><li class="leave_wrapper"><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div></li></ol></li><li class="maple"><ol class="leaves"><li class="leave_wrapper"><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div></li></ol></li><li class="maple"><ol class="leaves"><li class="leave_wrapper"><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div></li></ol></li><li class="maple"><ol class="leaves"><li class="leave_wrapper"><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div></li></ol></li><li class="maple"><ol class="leaves"><li class="leave_wrapper"><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div></li></ol></li><li class="maple"><ol class="leaves"><li class="leave_wrapper"><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div></li></ol></li><li class="maple"><ol class="leaves"><li class="leave_wrapper"><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div></li></ol></li><li class="maple"><ol class="leaves"><li class="leave_wrapper"><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div><div class="leave"></div></li></ol></li></ol></div>