CodePen

HTML

            
               
 <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTkOXg18q7yfkSl3jEjsiWlVoBvaTSa4swiOqguEDnBxww3DoR9" id="batman" class="img"/>
 <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQFXX7YcKX9L-D3vKy16pQsORiCnwOW0kwU-p_x1WCRS2pc8yur8w" id="cell" class="img"/>
 <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTxazBTxclQSWMm-GpxxColHmIySkXDYoJAUAxMexe_h1aSFNCCXg" id="eye" class="img"/>
 <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcT-8G6CsE4DFK-vH9R1Vz907pNiy-ZhKRGxaKJBMBMBt7Ab9Dxy" id="flower" class="img"/>
 <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQi32M8jep89G4pH2jKbVElkHAP3dovQMduQXeCUT1yeB5gveXl" id="mbison" class="img"/>
 <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQF-FmMw_VRraVgqm9PAgFjk0xaviTrWyXydNkK2a5421ussbcag" id="handphone" class="img"/>
 <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRkTwl-IIUjzgLMG8w_oN3AQMjafj6zHw5qzucHXVZ3xTYSrre6g" id="gohan" class="img"/>
 <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcS_RCH4zoCwAVlTKqMT7F6HPHyhlb_dR_EGYom7swd1iodmyYX1nw" id="snake" class="img"/>
 <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRAg3Oxz8e6deR6rf8YclRbSsCABlqkGQAK8CwfC5nbUEhk3bNwYA" id="ironman" class="img"/>
 <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQL5ghyGmzNMbR7umiYEx2_XuOH9V5oZ-TKfpFy5828s10jOCou" id="infinityblade" class="img"/>
            
          
!

CSS

            
              body
{
 background:black;
}
.img
  {
   border:solid 5px white;
   position:absolute;top:23px;left:175px;
   box-shadow:0px 0px 20px black;
  }
  

  #batman
  {
   -webkit-animation:1s slidebatman;
   -webkit-animation-delay:5s;
   -webkit-animation-fill-mode:forwards;
   position:absolute;top:23px;left:175px;
   width:408px;
  }
  @-webkit-keyframes slidebatman
  {
   100%{width:165px;position:absolute;top:100px;left:600px;-webkit-transform:rotate(0deg);}
  }
  #cell
  {
   width:100px;
   position:absolute;top:200px;left:50px;
   -webkit-transform:rotate(10deg);
   -webkit-animation:1s slidein, 1s slideout;
   -webkit-animation-delay:5.3s,10s;
   -webkit-animation-fill-mode:forwards;
  }
  @-webkit-keyframes slidein
  {
   100%{-webkit-transform:rotate(0deg);width:408px;position:absolute;top:23px;left:175px;}
  }
  @-webkit-keyframes slideout
  {
   0%{-webkit-transform:rotate(0deg);width:408px;position:absolute;top:23px;left:175px;}
   100%{-webkit-transform:rotate(10deg);width:100px;position:absolute;top:200px;left:600px;}
  }
  
  #eye
  {
   width:150px;
   position:absolute;top:300px;left:20px;
   -webkit-transform:rotate(-15deg);
   -webkit-animation:1s slideineye, 1s slideouteye;
   -webkit-animation-delay:10.3s,15.3s;
   -webkit-animation-fill-mode:forwards;
  }
  @-webkit-keyframes slideineye
  {
   100%{-webkit-transform:rotate(0deg);width:408px;position:absolute;top:23px;left:175px;}
  }
  @-webkit-keyframes slideouteye
  {
   0%{-webkit-transform:rotate(0deg);width:408px;position:absolute;top:23px;left:175px;}
   100%{-webkit-transform:rotate(10deg);width:150px;position:absolute;top:200px;left:30px;}
  }
  
  #flower
  {
   position:absolute;top:60px;left:30px;
   width:130px;
   -webkit-animation:1s slideinflower, 1s slideoutflower;
   -webkit-animation-delay:15.3s,20.3s;
   -webkit-animation-fill-mode:forwards;
  }
  @-webkit-keyframes slideinflower
  {
   100%{-webkit-transform:rotate(0deg);width:408px;position:absolute;top:23px;left:175px;}
  }
  @-webkit-keyframes slideoutflower
  {
   0%{-webkit-transform:rotate(0deg);width:408px;position:absolute;top:23px;left:175px;}
   100%{width:140px;position:absolute;top:100px;left:20px;}
  }
  
  #mbison
  {
   width:130px;
   position:absolute;top:60px;left:620px;
   -webkit-transform:rotate(20deg);
   -webkit-animation:1s slideinbison, 1s slideoutbison;
   -webkit-animation-delay:20.3s,25.3s;
   -webkit-animation-fill-mode:forwards;
  }
  @-webkit-keyframes slideinbison
  {
   100%{-webkit-transform:rotate(0deg);width:408px;position:absolute;top:23px;left:175px;}
  }
  @-webkit-keyframes slideoutbison
  {
   0%{-webkit-transform:rotate(0deg);width:408px;position:absolute;top:23px;left:175px;}
   100%{width:100px;position:absolute;top:290px;left:600px;}
  }
  
  #handphone
  {
   width:140px;
   position:absolute;top:200px;left:600px;
   -webkit-transform:rotate(-20deg);
   -webkit-animation:1s slideinhandphone, 1s slideouthandphone;
   -webkit-animation-delay:25.3s,30.3s;
   -webkit-animation-fill-mode:forwards;
  }
  @-webkit-keyframes slideinhandphone
  {
   100%{-webkit-transform:rotate(0deg);width:408px;position:absolute;top:23px;left:175px;}
  }
  @-webkit-keyframes slideouthandphone
  {
   0%{-webkit-transform:rotate(0deg);width:408px;position:absolute;top:23px;left:175px;}
   100%{width:105px;position:absolute;top:30px;left:20px;}
  }
  
  #gohan
  {
   width:120px;
   position:absolute;top:330px;left:640px;
   -webkit-animation:1s slideingohan, 1s slideoutgohan;
   -webkit-animation-delay:30.3s,35.3s;
   -webkit-animation-fill-mode:forwards;
  }
  @-webkit-keyframes slideingohan
  {
   100%{-webkit-transform:rotate(0deg);width:408px;position:absolute;top:23px;left:175px;}
  }
  @-webkit-keyframes slideoutgohan
  {
   0%{-webkit-transform:rotate(0deg);width:408px;position:absolute;top:23px;left:175px;}
   100%{width:110px;position:absolute;top:340px;left:40px;}
  }
  
  #snake
  {
   width:100px;
   position:absolute;top:10px;left:550px;
   -webkit-animation:1s slideinsnake, 1s slideoutsnake;
   -webkit-animation-delay:35.3s,40.3s;
   -webkit-animation-fill-mode:forwards;
  }
  @-webkit-keyframes slideinsnake
  {
   100%{-webkit-transform:rotate(0deg);width:408px;position:absolute;top:23px;left:175px;}
  }
  @-webkit-keyframes slideoutsnake
  {
   0%{-webkit-transform:rotate(0deg);width:408px;position:absolute;top:23px;left:175px;}
   100%{width:145px;position:absolute;top:10px;left:550px;}
  }
  
  #ironman
  {
   width:115px;
   position:absolute;top:350px;left:470px;
   -webkit-transform:rotate(30deg);
  }
  
  #infinityblade
  {
   width:110px;
   position:absolute;top:360px;left:340px;
   -webkit-animation:1s slideinib, 1s slideoutib;
   -webkit-animation-delay:40.3s,45.3s;
   -webkit-animation-fill-mode:forwards;
  }
  @-webkit-keyframes slideinib
  {
   100%{-webkit-transform:rotate(0deg);width:408px;position:absolute;top:23px;left:175px;}
  }
  @-webkit-keyframes slideoutib
  {
   0%{-webkit-transform:rotate(0deg);width:408px;position:absolute;top:23px;left:175px;}
   100%{width:100px;position:absolute;top:350px;left:600px;}
  }
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................