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

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

Or is this fixable?

不使用 CSS3 动画，不。

Is there any JavaScript alternative?

当然有——只需在您想要在一般时间 JavaScript 动画中更改其光标的元素上设置属性(或者更好，一个 class 或其他东西)。 (如果您不知道该怎么做，请先做一些研究。)