Question

我正在尝试使用CSS关键帧制作光标动画，但它似乎不起作用，这就是我所拥有的：

#video:hover {
animation: mouse_in 1s;
-o-animation: mouse_in 1s;
-ms-animation: mouse_in 1s;
-moz-animation: mouse_in 1s;
-webkit-animation: mouse_in 1s;
}

@keyframes mouse_in {
0% {cursor: pointer;}
20% {cursor: mouse;}
40% {cursor: crosshair;}
60% {cursor: ns-resize;}
80% {cursor: wait;}
100% {cursor: pointer;}
}

@-webkit-keyframes mouse_in {
0% {cursor: pointer;}
20% {cursor: mouse;}
40% {cursor: crosshair;}
60% {cursor: ns-resize;}
80% {cursor: wait;}
100% {cursor: pointer;}
}

但是当我将鼠标悬停在#video div

上时，它不会生成动画

有替代JavaScript吗？或者这可以解决吗？

我还尝试将所有animation个样式添加到#video而不是#video:hover

http://jsfiddle.net/pAkbf/

Answer 1

cursor不是动画属性：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

或者这可以解决吗？

不使用CSS3动画，没有。

有替代JavaScript吗？

当然有 - 只需要在一般时间JavaScript动画中要更改其光标的元素上设置属性（甚至更好，class或其他东西）。（如果您不知道如何做，请先做一些研究。）

使用关键帧动画光标不起作用

1 个答案: