Php CSS png sprite测试仪

我有这个代码，我已经做了，它是为了测试png带它显示动画，但它只适用于1 png带我有，任何其他我尝试它不工作，这是下面的代码 让卢布把代码放进去，这里有一个带代码的粘贴库链接 要了解我的意思，您可以在网站上测试一下，尝试使用此图像了解我的意思www.xatwebs.co/test.png，此图像与其他图像不兼容www.imagizer.imageshack.us/v2/6570x30q90/538/zyzaE7.png 代码：

---

您是否在浏览器中打开了开发人员控制台以查看是否存在错误？例如，我非常确定imageshack禁止内联是明智的，因此试图将该URL作为精灵表抓取很可能会被浏览器停止，因为浏览器被告知这是不允许的。我只是将imageshack中的图像添加到我的站点，并且有相同的问题：请将代码包含在问题中。使用{}按钮格式化代码。

<?php error_reporting(0); 
if (!isset($_POST['submit'])) {
 ?>
<center><p>Test</p></center>
<center><form method="get" action="<?php echo $_SERVER['PHP_SELF']; ?>">
Image: <input type="text" name="image" size="5">
<br/>
<input type="submit" value="Go!">
</form></center>
<?php
}
?>
<?php

$image = $_GET['image'];
list($width, $height) = getimagesize(''.$image.'');
if ($image == null) {
die("<center>Enter an image..</center>");
}

else {
$css = '
<style type="text/css">
.hi {
background-image:url("'.$image.'");
width:30px;
height:30px;
margin:auto;
-webkit-animation: hi .8s steps(10) infinite;
-moz-animation: hi .8s steps(10) infinite;
-ms-animation: hi .8s steps(10) infinite;
-o-animation: hi .8s steps(10) infinite;
animation: hi .8s steps(10) infinite;
}
-webkit-keyframes hi {  
from { background-position: 0px; } 
to { background-position: -'.$width.'px; } 
}
@-moz-keyframes hi {  
from { background-position: 0px; } 
to { background-position: -'.$width.'px; } 
} 
@-ms-keyframes hi {  
from { background-position: 0px; } 
to { background-position: -'.$width.'px; }  
}
@-o-keyframes hi {  
from { background-position: 0px; } 
to { background-position: -'.$width.'px; }  
} 
@keyframes hi {  
from { background-position: 0px; } 
to { background-position: -'.$width.'px; } 
}
</style>
';
    echo ''.$css.'<br><img src='.$image.' /><br><div class="hi"></div>';
}
?>