动画不适用于：：-webkit-slider thumb

Question

我已经为inputtype="range“元素创建了一些自定义样式。我已经创建了以下动画

@-webkit-keyframes balla {
    from {transform:rotate(0);}
    to {transform: rotate(360deg);}
} 

我适用于：

input[type="range"].twirl::-webkit-slider-thumb{
    -webkit-animation:balla 5s infinite;
    background: url(sliders/1.png)no-repeat center;
    height: 50px;
    width: 50px;
}

我的问题是，如果我将相同的动画应用于页面中的任何其他元素，它将起作用，但不适用于我的滑块。这是我的css：

<input type="range" value="0" min="0" max="10" step="0.1" id="slider" class="romvos no-shadow twirl">

有什么想法吗？

Answer 1

问题是这种转换只能在铬(不是铬)上工作，.I在火狐(windows和linux)和chrome(windows和linux)上进行了测试，并且只在铬上工作。

Answer 2

这(目前)是不可能的。Webkit确实支持一些伪元素上的动画，但特殊的伪选择器::webkit-slider-thumb不在其中。

在here上寻找一种简单的方法来检测伪元素上的动画支持。