需要 CSS3 动画帮助 为什么这不动画？

Question

我有一个网页，我正在尝试为鼠标悬停在页面上并四处移动的图片制作动画。但是我无法让愚蠢的东西工作，而且它似乎没有立即引发任何错误。 代码在这里：

有人可以指出我正确的方向吗？这个 css 有什么问题？为什么它不对图像进行动画处理？

Answer 1

您的代码没有为div指定任何尺寸，因此它没有显示背景的大小。

此外，您不需要在关键帧定义的每一行上重复background-image声明。

div {
background-image: url('http://nanocluster.umeche.maine.edu/mouse.png');
position: relative;
-webkit-animation: myfirst 5s;
/* Chrome, Safari, Opera */
animation: myfirst 5s;
height: 20px;
width: 20px;
background-repeat: no-repeat;
}
@keyframes myfirst {
0% {
    left:0px;
    top:0px;
}
25% {
    left:200px;
    top:0px;
}
50% {
    left:200px;
    top:200px;
}
75% {
    left:0px;
    top:200px;
}
100% {
    left:0px;
    top:0px;
}
}
@-webkit-keyframes myfirst {
0% {
    left:0px;
    top:0px;
}
25% {
    left:200px;
    top:0px;
}
50% {
    left:200px;
    top:200px;
}
75% {
    left:0px;
    top:200px;
}
100% {
    left:0px;
    top:0px;
}
}

<div></div>