如何在HTML中为一组PNG设置动画？

Question

我有这张图片：http://plug.dj/_/static/images/avatars/themes/default/space05.1e8c0ce.png我需要在HTML中制作动画，我该怎么做呢？

Answer 1

您可以使用CSS3

为图像设置动画

http://jsfiddle.net/84jac/

HTML

<div id="robot"></div> <!-- Image Container -->

CSS

#robot {
    width: 150px;
    height: 150px;
    background-image: url("http://plug.dj/_/static/images/avatars/themes/default/space05.1e8c0ce.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    animation-name: move;
    animation-duration: 1s;
    animation-timing-function: step-start; /* Changes background-position at the start of the time */
    animation-iteration-count: infinite;
}
@keyframes move {
    0% {background-position: 0 0;}
    10% {background-position: -150px 0;}
    20% {background-position: -300px 0;}
    30% {background-position: -450px 0;}
    40% {background-position: -600px 0;}
    50% {background-position: -750px 0;}
    60% {background-position: -900px 0;}
    70% {background-position: -1050px 0;}
    80% {background-position: -1200px 0;}
    90% {background-position: -1350px 0;}
    100% {background-position: -1500px 0;}
}