Question

我有一个网页，我试图动画鼠标悬停在页面上并移动的图片。但我无法让愚蠢的事情发挥作用，而且似乎没有立即抛出任何错误。 code here:

有人能指出我正确的方向吗？这个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>

css3动画帮助需要为什么没有这个动画？

1 个答案: