CodePen

HTML

            
              <h1>Animate image CSS</h1>
<div class="sublime"></div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              body{
  font-family:"Helvetica", sans-serif;
}


h1{
  text-align:center;
}

.sublime{
  
  margin:0 auto;
  
  background-image:url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=694,964,7,5),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=694,964,7,5),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=771,870,21,10),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=694,961,42,10),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=259,892,53,13),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=304,978,77,13),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=543,977,82,13),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=494,975,49,22),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=494,975,49,22),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=606,949,42,28),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=687,961,49,25),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=494,964,112,11),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=312,961,77,17),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=207,961,105,13),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=325,920,67,26),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=0,920,250,11),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=0,892,259,13),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=0,879,273,13),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=0,866,315,13),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=216,836,168,26),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=0,794,147,56),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=400,762,94,394),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=0,36,63,15),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=200,36,400,75),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=384,829,9,17),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=400,450,400,312),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=785,812,10,17),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=360,903,30,14),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=312,897,78,6),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=197,989,57,13),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=625,981,58,15),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=0,982,66,15),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=225,974,79,15),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=105,961,102,15),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=0,961,105,15),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=494,949,112,15),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=315,862,50,35),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=494,472,131,15),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=0,946,131,15),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=0,905,188,15),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=147,794,69,72),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=737,762,26,232),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=152,482,10,51),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=786,762,7,50),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=793,762,7,50),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=771,810,7,50),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=778,810,7,50),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=771,762,15,48),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=365,862,35,33),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=687,935,50,26),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=763,762,8,286),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=325,794,71,35),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=216,794,109,42),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=680,762,57,173),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=771,860,28,10),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=273,879,33,13),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=250,920,43,11),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=129,982,68,13),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=0,976,225,6),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=650,935,37,46),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=260,946,114,15),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=131,946,129,15),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=0,850,141,15),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=494,934,156,15),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=166,931,159,15),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=0,931,166,15),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=494,919,168,15),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=188,905,172,15),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=494,904,177,15),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=239,505,42,111),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=494,762,186,142),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=66,982,63,15),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=0,450,400,344),
url(http://www.sublimetext.com/anim/command_palette_packed.png#xywh=0,0,800,450);
background-position:175px 402px,
147px 177px,
182px 128px,
231px 384px,
719px 434px,
385px 83px,
238px 203px,
196px 357px,
196px 297px,
63px 38px,
224px 324px,
63px 113px,
224px 413px,
63px 158px,
183px 98px,
259px 113px,
175px 158px,
329px 203px,
63px 83px,
63px 203px,
63px 233px,
706px 36px,
0px 36px,
200px 36px,
231px 43px,
200px 68px,
222px 43px,
401px 190px,
285px 370px,
285px 210px,
429px 170px,
285px 350px,
285px 270px,
285px 150px,
285px 330px,
285px 190px,
285px 230px,
286px 310px,
294px 170px,
206px 290px,
285px 71px,
570px 68px,
586px 68px,
587px 69px,
587px 69px,
587px 69px,
587px 69px,
581px 71px,
285px 270px,
285px 350px,
231px 90px,
285px 310px,
214px 43px,
285px 90px,
566px 351px,
351px 290px,
551px 291px,
370px 190px,
206px 370px,
559px 68px,
206px 310px,
206px 350px,
206px 290px,
206px 330px,
206px 190px,
206px 270px,
206px 210px,
206px 250px,
206px 230px,
552px 131px,
206px 43px,
0px 36px,
200px 36px,
0px 0px;animation:command_palett 8542ms steps(1, start) infinite;

  width:800px;
  height:450px;
  background-repeat:no-repeat;
}

@keyframes command_palett{
0%{
background-position:-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
0px 0px;
}
21.201123858581127%{
background-position:-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
0px 36px,
200px 36px,
0px 0px;
}
21.7630531491454%{
background-position:-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
0px 36px,
200px 36px,
0px 0px;
}
31.1051276047764%{
background-position:-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
566px 351px,
351px 290px,
551px 291px,
370px 190px,
206px 370px,
559px 68px,
206px 310px,
206px 350px,
206px 290px,
206px 330px,
206px 190px,
206px 270px,
206px 210px,
206px 250px,
206px 230px,
552px 131px,
206px 43px,
0px 36px,
200px 36px,
0px 0px;
}
32.70896745492859%{
background-position:-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
581px 71px,
285px 270px,
285px 350px,
231px 90px,
285px 310px,
214px 43px,
285px 90px,
566px 351px,
351px 290px,
551px 291px,
370px 190px,
206px 370px,
559px 68px,
206px 310px,
206px 350px,
206px 290px,
206px 330px,
206px 190px,
206px 270px,
206px 210px,
206px 250px,
206px 230px,
552px 131px,
206px 43px,
0px 36px,
200px 36px,
0px 0px;
}
38.129243736829785%{
background-position:-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
587px 69px,
581px 71px,
285px 270px,
285px 350px,
231px 90px,
285px 310px,
214px 43px,
285px 90px,
566px 351px,
351px 290px,
551px 291px,
370px 190px,
206px 370px,
559px 68px,
206px 310px,
206px 350px,
206px 290px,
206px 330px,
206px 190px,
206px 270px,
206px 210px,
206px 250px,
206px 230px,
552px 131px,
206px 43px,
0px 36px,
200px 36px,
0px 0px;
}
38.63263872629361%{
background-position:-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
587px 69px,
587px 69px,
581px 71px,
285px 270px,
285px 350px,
231px 90px,
285px 310px,
214px 43px,
285px 90px,
566px 351px,
351px 290px,
551px 291px,
370px 190px,
206px 370px,
559px 68px,
206px 310px,
206px 350px,
206px 290px,
206px 330px,
206px 190px,
206px 270px,
206px 210px,
206px 250px,
206px 230px,
552px 131px,
206px 43px,
0px 36px,
200px 36px,
0px 0px;
}
39.18286115663779%{
background-position:-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
587px 69px,
587px 69px,
587px 69px,
581px 71px,
285px 270px,
285px 350px,
231px 90px,
285px 310px,
214px 43px,
285px 90px,
566px 351px,
351px 290px,
551px 291px,
370px 190px,
206px 370px,
559px 68px,
206px 310px,
206px 350px,
206px 290px,
206px 330px,
206px 190px,
206px 270px,
206px 210px,
206px 250px,
206px 230px,
552px 131px,
206px 43px,
0px 36px,
200px 36px,
0px 0px;
}
39.709669866541795%{
background-position:-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
587px 69px,
587px 69px,
587px 69px,
587px 69px,
581px 71px,
285px 270px,
285px 350px,
231px 90px,
285px 310px,
214px 43px,
285px 90px,
566px 351px,
351px 290px,
551px 291px,
370px 190px,
206px 370px,
559px 68px,
206px 310px,
206px 350px,
206px 290px,
206px 330px,
206px 190px,
206px 270px,
206px 210px,
206px 250px,
206px 230px,
552px 131px,
206px 43px,
0px 36px,
200px 36px,
0px 0px;
}
40.29501287754624%{
background-position:-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
586px 68px,
587px 69px,
587px 69px,
587px 69px,
587px 69px,
581px 71px,
285px 270px,
285px 350px,
231px 90px,
285px 310px,
214px 43px,
285px 90px,
566px 351px,
351px 290px,
551px 291px,
370px 190px,
206px 370px,
559px 68px,
206px 310px,
206px 350px,
206px 290px,
206px 330px,
206px 190px,
206px 270px,
206px 210px,
206px 250px,
206px 230px,
552px 131px,
206px 43px,
0px 36px,
200px 36px,
0px 0px;
}
40.9857176305315%{
background-position:-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
222px 43px,
401px 190px,
285px 370px,
285px 210px,
429px 170px,
285px 350px,
285px 270px,
285px 150px,
285px 330px,
285px 190px,
285px 230px,
286px 310px,
294px 170px,
206px 290px,
285px 71px,
570px 68px,
586px 68px,
587px 69px,
587px 69px,
587px 69px,
587px 69px,
581px 71px,
285px 270px,
285px 350px,
231px 90px,
285px 310px,
214px 43px,
285px 90px,
566px 351px,
351px 290px,
551px 291px,
370px 190px,
206px 370px,
559px 68px,
206px 310px,
206px 350px,
206px 290px,
206px 330px,
206px 190px,
206px 270px,
206px 210px,
206px 250px,
206px 230px,
552px 131px,
206px 43px,
0px 36px,
200px 36px,
0px 0px;
}
41.69983610395692%{
background-position:-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
231px 43px,
200px 68px,
222px 43px,
401px 190px,
285px 370px,
285px 210px,
429px 170px,
285px 350px,
285px 270px,
285px 150px,
285px 330px,
285px 190px,
285px 230px,
286px 310px,
294px 170px,
206px 290px,
285px 71px,
570px 68px,
586px 68px,
587px 69px,
587px 69px,
587px 69px,
587px 69px,
581px 71px,
285px 270px,
285px 350px,
231px 90px,
285px 310px,
214px 43px,
285px 90px,
566px 351px,
351px 290px,
551px 291px,
370px 190px,
206px 370px,
559px 68px,
206px 310px,
206px 350px,
206px 290px,
206px 330px,
206px 190px,
206px 270px,
206px 210px,
206px 250px,
206px 230px,
552px 131px,
206px 43px,
0px 36px,
200px 36px,
0px 0px;
}
46.88597518145634%{
background-position:-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
231px 43px,
200px 68px,
222px 43px,
401px 190px,
285px 370px,
285px 210px,
429px 170px,
285px 350px,
285px 270px,
285px 150px,
285px 330px,
285px 190px,
285px 230px,
286px 310px,
294px 170px,
206px 290px,
285px 71px,
570px 68px,
586px 68px,
587px 69px,
587px 69px,
587px 69px,
587px 69px,
581px 71px,
285px 270px,
285px 350px,
231px 90px,
285px 310px,
214px 43px,
285px 90px,
566px 351px,
351px 290px,
551px 291px,
370px 190px,
206px 370px,
559px 68px,
206px 310px,
206px 350px,
206px 290px,
206px 330px,
206px 190px,
206px 270px,
206px 210px,
206px 250px,
206px 230px,
552px 131px,
206px 43px,
0px 36px,
200px 36px,
0px 0px;
}
47.31912900959963%{
background-position:-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
231px 43px,
200px 68px,
222px 43px,
401px 190px,
285px 370px,
285px 210px,
429px 170px,
285px 350px,
285px 270px,
285px 150px,
285px 330px,
285px 190px,
285px 230px,
286px 310px,
294px 170px,
206px 290px,
285px 71px,
570px 68px,
586px 68px,
587px 69px,
587px 69px,
587px 69px,
587px 69px,
581px 71px,
285px 270px,
285px 350px,
231px 90px,
285px 310px,
214px 43px,
285px 90px,
566px 351px,
351px 290px,
551px 291px,
370px 190px,
206px 370px,
559px 68px,
206px 310px,
206px 350px,
206px 290px,
206px 330px,
206px 190px,
206px 270px,
206px 210px,
206px 250px,
206px 230px,
552px 131px,
206px 43px,
0px 36px,
200px 36px,
0px 0px;
}
47.75228283774292%{
background-position:-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
231px 43px,
200px 68px,
222px 43px,
401px 190px,
285px 370px,
285px 210px,
429px 170px,
285px 350px,
285px 270px,
285px 150px,
285px 330px,
285px 190px,
285px 230px,
286px 310px,
294px 170px,
206px 290px,
285px 71px,
570px 68px,
586px 68px,
587px 69px,
587px 69px,
587px 69px,
587px 69px,
581px 71px,
285px 270px,
285px 350px,
231px 90px,
285px 310px,
214px 43px,
285px 90px,
566px 351px,
351px 290px,
551px 291px,
370px 190px,
206px 370px,
559px 68px,
206px 310px,
206px 350px,
206px 290px,
206px 330px,
206px 190px,
206px 270px,
206px 210px,
206px 250px,
206px 230px,
552px 131px,
206px 43px,
0px 36px,
200px 36px,
0px 0px;
}
48.1971435261063%{
background-position:-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
231px 43px,
200px 68px,
222px 43px,
401px 190px,
285px 370px,
285px 210px,
429px 170px,
285px 350px,
285px 270px,
285px 150px,
285px 330px,
285px 190px,
285px 230px,
286px 310px,
294px 170px,
206px 290px,
285px 71px,
570px 68px,
586px 68px,
587px 69px,
587px 69px,
587px 69px,
587px 69px,
581px 71px,
285px 270px,
285px 350px,
231px 90px,
285px 310px,
214px 43px,
285px 90px,
566px 351px,
351px 290px,
551px 291px,
370px 190px,
206px 370px,
559px 68px,
206px 310px,
206px 350px,
206px 290px,
206px 330px,
206px 190px,
206px 270px,
206px 210px,
206px 250px,
206px 230px,
552px 131px,
206px 43px,
0px 36px,
200px 36px,
0px 0px;
}
48.64200421446968%{
background-position:-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
231px 43px,
200px 68px,
222px 43px,
401px 190px,
285px 370px,
285px 210px,
429px 170px,
285px 350px,
285px 270px,
285px 150px,
285px 330px,
285px 190px,
285px 230px,
286px 310px,
294px 170px,
206px 290px,
285px 71px,
570px 68px,
586px 68px,
587px 69px,
587px 69px,
587px 69px,
587px 69px,
581px 71px,
285px 270px,
285px 350px,
231px 90px,
285px 310px,
214px 43px,
285px 90px,
566px 351px,
351px 290px,
551px 291px,
370px 190px,
206px 370px,
559px 68px,
206px 310px,
206px 350px,
206px 290px,
206px 330px,
206px 190px,
206px 270px,
206px 210px,
206px 250px,
206px 230px,
552px 131px,
206px 43px,
0px 36px,
200px 36px,
0px 0px;
}
51.978459377195044%{
background-position:-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
-1000px -1000px,
0px 36px,
200px 36px,
231px 43px,
200px 68px,
222px 43px,
401px 190px,
285px 370px,
285px 210px,
429px 170px,
285px 350px,
285px 270px,
285px 150px,
285px 330px,
285px 190px,
285px 230px,
286px 310px,
294px 170px,
206px 290px,
285px 71px,
570px 68px,
586px 68px,
587px 69px,
587px 69px,
587px 69px,
587px 69px,
581px 71px,
285px 270px,
285px 350px,
231px 90px,
285px 310px,
214px 43px,
285px 90px,
566px 351px,
351px 290px,
551px 291px,
370px 190px,
206px 370px,
559px 68px,
206px 310px,
206px 350px,
206px 290px,
206px 330px,
206px 190px,
206px 270px,
206px 210px,
206px 250px,
206px 230px,
552px 131px,
206px 43px,
0px 36px,
200px 36px,
0px 0px;
}
53.17255911964411%{
background-position:175px 402px,
147px 177px,
182px 128px,
231px 384px,
719px 434px,
385px 83px,
238px 203px,
196px 357px,
196px 297px,
63px 38px,
224px 324px,
63px 113px,
224px 413px,
63px 158px,
183px 98px,
259px 113px,
175px 158px,
329px 203px,
63px 83px,
63px 203px,
63px 233px,
706px 36px,
0px 36px,
200px 36px,
231px 43px,
200px 68px,
222px 43px,
401px 190px,
285px 370px,
285px 210px,
429px 170px,
285px 350px,
285px 270px,
285px 150px,
285px 330px,
285px 190px,
285px 230px,
286px 310px,
294px 170px,
206px 290px,
285px 71px,
570px 68px,
586px 68px,
587px 69px,
587px 69px,
587px 69px,
587px 69px,
581px 71px,
285px 270px,
285px 350px,
231px 90px,
285px 310px,
214px 43px,
285px 90px,
566px 351px,
351px 290px,
551px 291px,
370px 190px,
206px 370px,
559px 68px,
206px 310px,
206px 350px,
206px 290px,
206px 330px,
206px 190px,
206px 270px,
206px 210px,
206px 250px,
206px 230px,
552px 131px,
206px 43px,
0px 36px,
200px 36px,
0px 0px;
}
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              /*
Based on this: http://www.sublimetext.com/~jps/animated_gifs_the_hard_way.html
*/



/*
 Media Fragment URI - Spatial Dimentions polyfill
 http://www.w3.org/TR/media-frags/#naming-space

 It's working in WebKit and Firefox

 WebKit using -webkit-canvas as background.
 Firefox using -moz-image-rect
  
*/

(function($) {

  $.fn.SpatialURIFragPolyFill = function() {
    var cssPattern = /\s*(.*?)\s*\{(.*?)\}/g;
    var bgPattern = /(background(?:-image)*):(.*?);/;

    var uriPattern = /url\((.*?#.*?)\)/g; 
    var spPattern = /(.*?)#xywh=(pixel|percent)*:*(\d+),(\d+),(\d+),(\d+)/;

    var supportBackgroundCanvas = (document.getCSSCanvasContext !== undefined);
    var supportMozImageRect     = !supportBackgroundCanvas;
                                 // don't have a test for that....
    var globaleImageCount = 0;

    var cssCanvas = function(src, name, x, y, w, h, isPercent){
      var img = new Image();
      img.onload = function(){
        if (isPercent){
           var imageWidth = img.width, imageHeight = img.height;

           w = imageWidth * (w*0.01);
           h = imageHeight * (h*0.01);

           x = imageWidth * (x*0.01);
           y = imageHeight * (y*0.01);
        }
        // Delete the canvas before drawing on it!
        document.getCSSCanvasContext("2d", name, 0, 0);
        
        var ctx = document.getCSSCanvasContext("2d", name, w, h);
            ctx.drawImage(img, x,y,w,h,0,0,w,h);
      };
      img.src = src;
    };


    var parseURI = function(URI){
      var frag = spPattern.exec(URI),
          result = "";
      if (frag !== null){

        var src = frag[1],
            isPercent = (frag[2] !== undefined && frag[1].toLowerCase() === "percent"),
            x = parseInt(frag[3],10),
            y = parseInt(frag[4],10),
            w = parseInt(frag[5],10),
            h = parseInt(frag[6],10);

        if (supportBackgroundCanvas){
          var name = "poly_img_"+globaleImageCount;
          cssCanvas(src, name, x, y, w, h, isPercent);
          result = "-webkit-canvas("+name+")";
          globaleImageCount++;
        }else if(supportMozImageRect){
          var bottom = y + h,
              right = x + w,
              unit = isPercent ? "%" : "";
          result = "-moz-image-rect(url("+src+"),"+y+unit+","+right+unit+","+bottom+unit+","+x+unit+")";
        }
      }
      return [result, x, y, w, h, isPercent];
    };


    var parse = function(css){
       var updatedCSS = "", matches, uri;
       css = css.replace(/\s*(?!<\")\/\*[^\*]+\*\/(?!\")\s*/gm, '').replace(/ |\n|\r/g, '');


       while ((matches = cssPattern.exec(css)) !== null){
         var selector = matches[1];
         var rule = matches[2];
         if (rule !== ""){
           var bgMatch =  bgPattern.exec(rule);
           if (bgMatch !== null){
             var bgProp = bgMatch[1];
             var bg = bgMatch[2];
             var modBg = bg;
             while ((uri = uriPattern.exec(bg)) !== null){
               modBg = modBg.replace(uri[0], parseURI(uri[1])[0]);
             }
             updatedCSS += selector+"{"+bgProp+":"+modBg+" !important;}";
           }
          }
        }
       $('<style>' + updatedCSS + '</style>').appendTo('head');
    };

    // Update CSS
    $('style').each(function() {
        if ($(this).is('link')) $.get(this.href).success(function(css) { parse(css); }); else parse($(this).text());
    });

    // Update IMG-Tag
    $('img').each(function(){
      var $this = $(this);
      var uri = this.src;
      var parsedURI = parseURI(uri);
      if (parsedURI !== null){
      var unit = parsedURI[5] ? "%" : "px";

      $this.attr("style", "display:block;background-image:"+parsedURI[0]+";width:"+parsedURI[3]+unit+";height:"+parsedURI[4]+unit+";");
      this.src = "";
        }
    });


  };
})(jQuery);

$.fn.SpatialURIFragPolyFill();
 
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................