Moonwalk

In this example below you will see how to do a Moonwalk with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by dustinleer, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright dustinleer ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Moonwalk</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="wrapper">
<div class="astronaut1">
  <!--ASTRONAUT'S MOVE 1-->
<!--01-->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--02-->
<ul>
<li></li>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--03-->
<ul>
<li></li>
<li></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--04-->
<ul>
<li></li>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--05-->
<ul>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
</ul>
<!--06-->
<ul>
<li></li>
<li class="pixel white"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
</ul>
<!--07-->
<ul>
<li class="pixel grey"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
</ul>
<!--08-->
<ul>
<li class="pixel white"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel red"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
</ul>
<!--09-->
<ul>
<li class="pixel white"></li>
<li></li>
<li class="pixel red"></li>
<li class="pixel red"></li>
<li class="pixel red"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--10-->
<ul>
<li class="pixel white"></li>
<li></li>
<li class="pixel red"></li>
<li class="pixel red"></li>
<li class="pixel red"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
</ul>
<!--11-->
<ul>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li class="pixel red"></li>
<li class="pixel red"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
</ul>
<!--12-->
<ul>
<li></li>
<li class="pixel white"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
</ul>
<!--13-->
<ul>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li class="pixel grey"></li>
</ul>
<!--14-->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="astronaut2">
  <!--ASTRONAUT'S MOVE 2-->
<!--01-->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--02-->
<ul>
<li></li>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--03-->
<ul>
<li></li>
<li></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--04-->
<ul>
<li></li>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--05-->
<ul>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
</ul>
<!--06-->
<ul>
<li></li>
<li class="pixel white"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
</ul>
<!--07-->
<ul>
<li class="pixel grey"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
</ul>
<!--08-->
<ul>
<li class="pixel white"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel red"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
</ul>
<!--09-->
<ul>
<li class="pixel white"></li>
<li></li>
<li class="pixel red"></li>
<li class="pixel red"></li>
<li class="pixel red"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--10-->
<ul>
<li class="pixel white"></li>
<li></li>
<li class="pixel red"></li>
<li class="pixel red"></li>
<li class="pixel red"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
</ul>
<!--11-->
<ul>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li class="pixel red"></li>
<li class="pixel red"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
</ul>
<!--12-->
<ul>
<li></li>
<li class="pixel white"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
</ul>
<!--13-->
<ul>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li class="pixel grey"></li>
</ul>
<!--14-->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="astronaut3">
  <!--ASTRONAUT'S MOVE 3-->
<!--01-->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--02-->
<ul>
<li></li>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--03-->
<ul>
<li></li>
<li></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--04-->
<ul>
<li></li>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--05-->
<ul>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--06-->
<ul>
<li></li>
<li class="pixel white"></li>
<li></li>
<li></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
</ul>
<!--07-->
<ul>
<li class="pixel grey"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
</ul>
<!--08-->
<ul>
<li class="pixel white"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel red"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
</ul>
<!--09-->
<ul>
<li class="pixel white"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel red"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
</ul>
<!--10-->
<ul>
<li class="pixel white"></li>
<li></li>
<li class="pixel red"></li>
<li class="pixel red"></li>
<li class="pixel red"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
</ul>
<!--11-->
<ul>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li class="pixel red"></li>
<li class="pixel red"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>

</ul>
<!--12-->
<ul>
<li></li>
<li class="pixel white"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--13-->
<ul>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--14-->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="astronaut4">
  <!--ASTRONAUT'S MOVE 4-->
<!--01-->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--02-->
<ul>
<li></li>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--03-->
<ul>
<li></li>
<li></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--04-->
<ul>
<li></li>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--05-->
<ul>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--06-->
<ul>
<li></li>
<li class="pixel white"></li>
<li></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
</ul>
<!--07-->
<ul>
<li class="pixel grey"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
</ul>
<!--08-->
<ul>
<li class="pixel white"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel red"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
</ul>
<!--09-->
<ul>
<li class="pixel white"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel red"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
</ul>
<!--10-->
<ul>
<li class="pixel white"></li>
<li></li>
<li class="pixel red"></li>
<li class="pixel red"></li>
<li class="pixel red"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
</ul>
<!--11-->
<ul>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li class="pixel red"></li>
<li class="pixel red"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li></li>
</ul>
<!--12-->
<ul>
<li></li>
<li class="pixel white"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--13-->
<ul>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--14-->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="astronaut5">
  <!--ASTRONAUT'S MOVE 5-->
<!--01-->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--02-->
<ul>
<li></li>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--03-->
<ul>
<li></li>
<li></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--04-->
<ul>
<li></li>
<li></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--05-->
<ul>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
</ul>
<!--06-->
<ul>
<li></li>
<li class="pixel white"></li>
<li></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
</ul>
<!--07-->
<ul>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
</ul>
<!--08-->
<ul>
<li class="pixel white"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel red"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
</ul>
<!--09-->
<ul>
<li class="pixel white"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel red"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--10-->
<ul>
<li class="pixel white"></li>
<li></li>
<li class="pixel red"></li>
<li class="pixel red"></li>
<li class="pixel red"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
</ul>
<!--11-->
<ul>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li class="pixel red"></li>
<li class="pixel red"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
</ul>
<!--12-->
<ul>
<li></li>
<li class="pixel white"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="pixel white"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
</ul>
<!--13-->
<ul>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
</ul>
<!--14-->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="astronaut6">
  <!--ASTRONAUT'S MOVE 6-->
<!--01-->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--02-->
<ul>
<li></li>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--03-->
<ul>
<li></li>
<li></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--04-->
<ul>
<li></li>
<li></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--05-->
<ul>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
</ul>
<!--06-->
<ul>
<li></li>
<li class="pixel white"></li>
<li></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
</ul>
<!--07-->
<ul>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
</ul>
<!--08-->
<ul>
<li class="pixel white"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel red"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
</ul>
<!--09-->
<ul>
<li class="pixel white"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel red"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--10-->
<ul>
<li class="pixel white"></li>
<li></li>
<li class="pixel red"></li>
<li class="pixel red"></li>
<li class="pixel red"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
</ul>
<!--11-->
<ul>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li class="pixel red"></li>
<li class="pixel red"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
</ul>
<!--12-->
<ul>
<li></li>
<li class="pixel white"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="pixel white"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
</ul>
<!--13-->
<ul>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
</ul>
<!--14-->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="astronaut7">
  <!--ASTRONAUT'S MOVE 7-->
<!--01-->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--02-->
<ul>
<li></li>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--03-->
<ul>
<li></li>
<li></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--04-->
<ul>
<li></li>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--05-->
<ul>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
</ul>
<!--06-->
<ul>
<li></li>
<li class="pixel white"></li>
<li></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
</ul>
<!--07-->
<ul>
<li class="pixel grey"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
</ul>
<!--08-->
<ul>
<li class="pixel white"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel red"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
</ul>
<!--09-->
<ul>
<li class="pixel white"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel red"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
</ul>
<!--10-->
<ul>
<li class="pixel white"></li>
<li></li>
<li class="pixel red"></li>
<li class="pixel red"></li>
<li class="pixel red"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
</ul>
<!--11-->
<ul>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li class="pixel red"></li>
<li class="pixel red"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
</ul>
<!--12-->
<ul>
<li></li>
<li class="pixel white"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--13-->
<ul>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--14-->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="astronaut8">
  <!--ASTRONAUT'S MOVE 8-->
<!--01-->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--02-->
<ul>
<li></li>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--03-->
<ul>
<li></li>
<li></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--04-->
<ul>
<li></li>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--05-->
<ul>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--06-->
<ul>
<li></li>
<li class="pixel white"></li>
<li></li>
<li></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
</ul>
<!--07-->
<ul>
<li class="pixel grey"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
</ul>
<!--08-->
<ul>
<li class="pixel white"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel red"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
</ul>
<!--09-->
<ul>
<li class="pixel white"></li>
<li></li>
<li class="pixel red"></li>
<li class="pixel red"></li>
<li class="pixel red"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
</ul>
<!--10-->
<ul>
<li class="pixel white"></li>
<li></li>
<li class="pixel red"></li>
<li class="pixel red"></li>
<li class="pixel red"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
</ul>
<!--11-->
<ul>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li class="pixel red"></li>
<li class="pixel red"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li></li>
</ul>
<!--12-->
<ul>
<li></li>
<li class="pixel white"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--13-->
<ul>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--14-->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/dustinleer/moonwalk-aAbFu */
* {
margin:0;
padding:0;
}

body {
overflow:hidden;
margin:0 auto; 
background:#000;
}

.wrapper {
width:500px;
position:relative;
margin-top:3em; 
display:block;
background:#000;

-webkit-animation:moonwalk 5s linear infinite;
   -moz-animation:moonwalk 5s linear infinite;
    -ms-animation:moonwalk 5s linear infinite;
     -o-animation:moonwalk 5s linear infinite;
        animation:moonwalk 5s linear infinite;
}

@-webkit-keyframes moonwalk {
from {left:120%;  }
to   {left:-500px;}
}

@-moz-keyframes moonwalk {
from {left:120%;  }
to   {left:-500px;}
}

@-ms-keyframes moonwalk {
from {left:120%;  }
to   {left:-500px;}
}

@-o-keyframes moonwalk {
from {left:120%;  }
to   {left:-500px;}
}

@keyframes moonwalk {
from {left:120%;  }
to   {left:-500px;}
}

ul {
list-style:none;
display:inline-block;
}

ul li {
margin-right:-4px;
background:#000;
}

.pixel,
ul li {
width:10px;
height:10px;
}

.grey  {background:#ccc;}
.white {background:#fff;}
.red   {background: red;}

.astronaut1,
.astronaut2,
.astronaut3,
.astronaut4,
.astronaut5,
.astronaut6,
.astronaut7,
.astronaut8 {position:absolute;}

.astronaut1 {
-webkit-animation:move1 1s linear infinite;
   -moz-animation:move1 1s linear infinite;
    -ms-animation:move1 1s linear infinite;
     -o-animation:move1 1s linear infinite;
        animation:move1 1s linear infinite;
}
.astronaut2 {
-webkit-animation:move2 1s linear infinite;
   -moz-animation:move2 1s linear infinite;
    -ms-animation:move2 1s linear infinite;
     -o-animation:move2 1s linear infinite;
        animation:move2 1s linear infinite;
}
.astronaut3 {
-webkit-animation:move3 1s linear infinite;
   -moz-animation:move3 1s linear infinite;
    -ms-animation:move3 1s linear infinite;
     -o-animation:move3 1s linear infinite;
        animation:move3 1s linear infinite;
}
.astronaut4 {
-webkit-animation:move4 1s linear infinite;
   -moz-animation:move4 1s linear infinite;
    -ms-animation:move4 1s linear infinite;
     -o-animation:move4 1s linear infinite;
        animation:move4 1s linear infinite;
}
.astronaut5 {
-webkit-animation:move5 1s linear infinite;
   -moz-animation:move5 1s linear infinite;
    -ms-animation:move5 1s linear infinite;
     -o-animation:move5 1s linear infinite;
        animation:move5 1s linear infinite;
}
.astronaut6 {
-webkit-animation:move6 1s linear infinite;
   -moz-animation:move6 1s linear infinite;
    -ms-animation:move6 1s linear infinite;
     -o-animation:move6 1s linear infinite;
        animation:move6 1s linear infinite;
}
.astronaut7 {
-webkit-animation:move7 1s linear infinite;
   -moz-animation:move7 1s linear infinite;
    -ms-animation:move7 1s linear infinite;
     -o-animation:move7 1s linear infinite;
        animation:move7 1s linear infinite;
}
.astronaut8 {
-webkit-animation:move8 1s linear infinite;
   -moz-animation:move8 1s linear infinite;
    -ms-animation:move8 1s linear infinite;
     -o-animation:move8 1s linear infinite;
        animation:move8 1s linear infinite;
}

/*MOVE1*/
@-webkit-keyframes move1 {
0%   {opacity:1;}
12%  {opacity:1;}
13%  {opacity:0;}
99%  {opacity:1;}
100% {opacity:0;}
}
@-moz-keyframes move1 {
0%   {opacity:1;}
12%  {opacity:1;}
13%  {opacity:0;}
99%  {opacity:1;}
100% {opacity:0;}
}
@-ms-keyframes move1 {
0%   {opacity:1;}
12%  {opacity:1;}
13%  {opacity:0;}
99%  {opacity:1;}
100% {opacity:0;}
}
@-o-keyframes move1 {
0%   {opacity:1;}
12%  {opacity:1;}
13%  {opacity:0;}
99%  {opacity:1;}
100% {opacity:0;}
}
@keyframes move1 {
0%   {opacity:1;}
12%  {opacity:1;}
13%  {opacity:0;}
99%  {opacity:1;}
100% {opacity:0;}
}

/*MOVE2*/
@-webkit-keyframes move2 {
0%   {opacity:0;}
12%  {opacity:0;}
13%  {opacity:1;}
23%  {opacity:1;}
24%  {opacity:0;}
99%  {opacity:0;}
100% {opacity:0;}
}

@-moz-keyframes move2 {
0%   {opacity:0;}
12%  {opacity:0;}
13%  {opacity:1;}
23%  {opacity:1;}
24%  {opacity:0;}
99%  {opacity:0;}
100% {opacity:0;}
}

@-ms-keyframes move2 {
0%   {opacity:0;}
12%  {opacity:0;}
13%  {opacity:1;}
23%  {opacity:1;}
24%  {opacity:0;}
99%  {opacity:0;}
100% {opacity:0;}
}

@-o-keyframes move2 {
0%   {opacity:0;}
12%  {opacity:0;}
13%  {opacity:1;}
23%  {opacity:1;}
24%  {opacity:0;}
99%  {opacity:0;}
100% {opacity:0;}
}

@keyframes move2 {
0%   {opacity:0;}
12%  {opacity:0;}
13%  {opacity:1;}
23%  {opacity:1;}
24%  {opacity:0;}
99%  {opacity:0;}
100% {opacity:0;}
}

/*MOVE3*/
@-webkit-keyframes move3 {
0%   {opacity:0;}
23%  {opacity:0;}
24%  {opacity:1;}
34%  {opacity:1;}
35%  {opacity:0;}
99%  {opacity:0;}
100% {opacity:0;}
}

@-moz-keyframes move3 {
0%   {opacity:0;}
23%  {opacity:0;}
24%  {opacity:1;}
34%  {opacity:1;}
35%  {opacity:0;}
99%  {opacity:0;}
100% {opacity:0;}
}

@-ms-keyframes move3 {
0%   {opacity:0;}
23%  {opacity:0;}
24%  {opacity:1;}
34%  {opacity:1;}
35%  {opacity:0;}
99%  {opacity:0;}
100% {opacity:0;}
}

@-o-keyframes move3 {
0%   {opacity:0;}
23%  {opacity:0;}
24%  {opacity:1;}
34%  {opacity:1;}
35%  {opacity:0;}
99%  {opacity:0;}
100% {opacity:0;}
}

@keyframes move3 {
0%   {opacity:0;}
23%  {opacity:0;}
24%  {opacity:1;}
34%  {opacity:1;}
35%  {opacity:0;}
99%  {opacity:0;}
100% {opacity:0;}
}

/*MOVE4*/
@-webkit-keyframes move4 {
0%   {opacity:0;}
34%  {opacity:0;}
35%  {opacity:1;}
45%  {opacity:1;}
46%  {opacity:0;}
99%  {opacity:0;}
100% {opacity:0;}
}

@-moz-keyframes move4 {
0%   {opacity:0;}
34%  {opacity:0;}
35%  {opacity:1;}
45%  {opacity:1;}
46%  {opacity:0;}
99%  {opacity:0;}
100% {opacity:0;}
}

@-ms-keyframes move4 {
0%   {opacity:0;}
34%  {opacity:0;}
35%  {opacity:1;}
45%  {opacity:1;}
46%  {opacity:0;}
99%  {opacity:0;}
100% {opacity:0;}
}

@-o-keyframes move4 {
0%   {opacity:0;}
34%  {opacity:0;}
35%  {opacity:1;}
45%  {opacity:1;}
46%  {opacity:0;}
99%  {opacity:0;}
100% {opacity:0;}
}

@keyframes move4 {
0%   {opacity:0;}
34%  {opacity:0;}
35%  {opacity:1;}
45%  {opacity:1;}
46%  {opacity:0;}
99%  {opacity:0;}
100% {opacity:0;}
}

/*MOVE5*/
@-webkit-keyframes move5 {
0%   {opacity:0;}
45%  {opacity:0;}
46%  {opacity:1;}
56%  {opacity:1;}
57%  {opacity:0;}
99%  {opacity:0;}
100% {opacity:0;}
}

@-moz-keyframes move5 {
0%   {opacity:0;}
45%  {opacity:0;}
46%  {opacity:1;}
56%  {opacity:1;}
57%  {opacity:0;}
99%  {opacity:0;}
100% {opacity:0;}
}

@-ms-keyframes move5 {
0%   {opacity:0;}
45%  {opacity:0;}
46%  {opacity:1;}
56%  {opacity:1;}
57%  {opacity:0;}
99%  {opacity:0;}
100% {opacity:0;}
}

@-o-keyframes move5 {
0%   {opacity:0;}
45%  {opacity:0;}
46%  {opacity:1;}
56%  {opacity:1;}
57%  {opacity:0;}
99%  {opacity:0;}
100% {opacity:0;}
}

@keyframes move5 {
0%   {opacity:0;}
45%  {opacity:0;}
46%  {opacity:1;}
56%  {opacity:1;}
57%  {opacity:0;}
99%  {opacity:0;}
100% {opacity:0;}
}

/*MOVE6*/
@-webkit-keyframes move6 {
0%   {opacity:0;}
56%  {opacity:0;}
57%  {opacity:1;}
67%  {opacity:1;}
68%  {opacity:0;}
99%  {opacity:0;}
100% {opacity:0;}
}

@-moz-keyframes move6 {
0%   {opacity:0;}
56%  {opacity:0;}
57%  {opacity:1;}
67%  {opacity:1;}
68%  {opacity:0;}
99%  {opacity:0;}
100% {opacity:0;}
}

@-ms-keyframes move6 {
0%   {opacity:0;}
56%  {opacity:0;}
57%  {opacity:1;}
67%  {opacity:1;}
68%  {opacity:0;}
99%  {opacity:0;}
100% {opacity:0;}
}

@-o-keyframes move6 {
0%   {opacity:0;}
56%  {opacity:0;}
57%  {opacity:1;}
67%  {opacity:1;}
68%  {opacity:0;}
99%  {opacity:0;}
100% {opacity:0;}
}

@keyframes move6 {
0%   {opacity:0;}
56%  {opacity:0;}
57%  {opacity:1;}
67%  {opacity:1;}
68%  {opacity:0;}
99%  {opacity:0;}
100% {opacity:0;}
}

/*MOVE7*/
@-webkit-keyframes move7 {
0%   {opacity:0;}
67%  {opacity:0;}
68%  {opacity:1;}
78%  {opacity:1;}
79%  {opacity:0;}
99%  {opacity:0;}
100% {opacity:0;}
}

@-moz-keyframes move7 {
0%   {opacity:0;}
67%  {opacity:0;}
68%  {opacity:1;}
78%  {opacity:1;}
79%  {opacity:0;}
99%  {opacity:0;}
100% {opacity:0;}
}

@-ms-keyframes move7 {
0%   {opacity:0;}
67%  {opacity:0;}
68%  {opacity:1;}
78%  {opacity:1;}
79%  {opacity:0;}
99%  {opacity:0;}
100% {opacity:0;}
}

@-o-keyframes move7 {
0%   {opacity:0;}
67%  {opacity:0;}
68%  {opacity:1;}
78%  {opacity:1;}
79%  {opacity:0;}
99%  {opacity:0;}
100% {opacity:0;}
}

@keyframes move7 {
0%   {opacity:0;}
67%  {opacity:0;}
68%  {opacity:1;}
78%  {opacity:1;}
79%  {opacity:0;}
99%  {opacity:0;}
100% {opacity:0;}
}

/*MOVE8*/
@-webkit-keyframes move8 {
0%   {opacity:0;}
78%  {opacity:0;}
79%  {opacity:1;}
89%  {opacity:1;}
90%  {opacity:0;}
100% {opacity:0;}
}

@-moz-keyframes move8 {
0%   {opacity:0;}
78%  {opacity:0;}
79%  {opacity:1;}
89%  {opacity:1;}
90%  {opacity:0;}
100% {opacity:0;}
}

@-ms-keyframes move8 {
0%   {opacity:0;}
78%  {opacity:0;}
79%  {opacity:1;}
89%  {opacity:1;}
90%  {opacity:0;}
100% {opacity:0;}
}

@-o-keyframes move8 {
0%   {opacity:0;}
78%  {opacity:0;}
79%  {opacity:1;}
89%  {opacity:1;}
90%  {opacity:0;}
100% {opacity:0;}
}

@keyframes move8 {
0%   {opacity:0;}
78%  {opacity:0;}
79%  {opacity:1;}
89%  {opacity:1;}
90%  {opacity:0;}
100% {opacity:0;}
}

Comments