Css， Sprite 动画

Question

我有 5 张 png 图像(河马做俯卧撑!)，我想在网站上鼠标悬停时制作动画。我已经设法使用 sprite 和 css 定位为它们制作动画，但是， a) 我不知道如何在 mouseover/mouseoff 上停止和启动动画以及... b) 它在 IE 中不起作用 请帮助 http://www.arc-bpictures.com/anim.html 谢谢

Answer 1

您只需将#sprite 动画规则移动到#sprite:hover。

#sprite {
    width:197px;
    height:250px;
    background:url(img/anim1.png) 0 0;
}

#sprite:hover {
    -webkit-animation-duration:1200ms;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:step-start;
    -webkit-animation-name:animate01;
    -moz-animation-duration:1200ms;
    -moz-animation-iteration-count:infinite;
    -moz-animation-timing-function:step-start;
    -moz-animation-name:animate01;
}

哦，以 -webkit- 或 -moz- 开头的 css 无法在 IE 中运行。对于 IE < 9，您需要使用 javascript 来实现此目的(不确定 IE9 的动画 CSS 支持)。