Html 动画未应用于：：-webkit滑块拇指

我为输入[type=“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">

有什么想法吗？

这（目前）是不可能的。Webkit确实支持某些伪元素上的动画，但特殊的伪选择器

：：Webkit滑块thumb

不在其中

---

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

问题是，此转换仅适用于chrome（而非chrome）。我在firefox（windows和linux）和chrome（windows和linux）上进行了测试，并且仅适用于chrome

是否希望动画在输入端或滑块拇指中？如果将相同的动画应用于输入，则它将工作。我希望它使用渲染引擎，而不是WebKit。我不确定，但这可以解释为什么它只在铬中起作用。