CodePen

HTML

            
               
 <img src="http://reallycoolstuff.net/PROJECTS/JV/images/drawings/batman.jpg" id="batman" class="img"/>
 <img src="http://reallycoolstuff.net/PROJECTS/JV/images/drawings/cell.jpg" id="cell" class="img"/>
 <img src="http://reallycoolstuff.net/PROJECTS/JV/images/drawings/eye.jpg" id="eye" class="img"/>
 <img src="http://reallycoolstuff.net/PROJECTS/JV/images/drawings/flowerhand.jpg" id="flower" class="img"/>
 <img src="http://reallycoolstuff.net/PROJECTS/JV/images/drawings/snake.jpg" id="mbison" class="img"/>
 <img src="http://reallycoolstuff.net/PROJECTS/JV/images/drawings/mbison.jpg" id="handphone" class="img"/>
 <img src="http://reallycoolstuff.net/PROJECTS/JV/images/drawings/gohan.jpg" id="gohan" class="img"/>
 <img src="http://reallycoolstuff.net/PROJECTS/JV/images/drawings/infinityblade.jpg" id="snake" class="img"/>
 <img src="http://reallycoolstuff.net/PROJECTS/JV/images/drawings/infinityblade.jpg" id="ironman" class="img"/>
 <img src="http://reallycoolstuff.net/PROJECTS/JV/images/drawings/ironman.jpg" id="infinityblade" class="img"/>
            
          
!

CSS

            
                body
{
  background-color: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:3s;
   -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(10deg);}
  }
  
  #cell
  {
   width:100px;
   position:absolute;top:200px;left:50px;
   -webkit-transform:rotate(10deg);
   -webkit-animation:1s slidein, 1s slideout;
   -webkit-animation-delay:3s,5s;
   -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);
  }
  
  #flower
  {
   position:absolute;top:60px;left:30px;
   width:130px;
  }
  
  #mbison
  {
   width:130px;
   position:absolute;top:60px;left:620px;
   -webkit-transform:rotate(20deg);
  }
  
  #handphone
  {
   width:140px;
   position:absolute;top:200px;left:600px;
   -webkit-transform:rotate(-20deg);
  }
  
  #gohan
  {
   width:120px;
   position:absolute;top:330px;left:640px;
  }
  
  #snake
  {
   width:100px;
   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;
  }
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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