动画不适用于::-webkit-slider-thumb [英] Animation is not applied to ::-webkit-slider-thumb

问题描述

我为input [type = range]元素创建了一些自定义样式。我创建了以下动画

I have created some custom styles for input[type="range"] elements. I have created the following animation

@-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：

My problem is that if I apply the same animation to any other element in the page it will work but not for my slider. Here is my css:

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

有什么想法吗？

推荐答案

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

The problem is that this transformation will work only on chromium(not chrome).I tested it on firefox(windows and linux) and chrome(windows and linux) and only works on chromium

这篇关于动画不适用于::-webkit-slider-thumb的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！