Animation is not applied to ::-webkit-slider-thumb

问题

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);}
} 

which I apply to:

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

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">

Any ideas?

回答1:

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

回答2:

That's (currently) not possible. Webkit does support animations on some pseudo-elements, but the special pseudo selector ::webkit-slider-thumb is not one of them.

Look here for a simple way to detect animation support on a pseudo-element.

来源：https://stackoverflow.com/questions/29059860/animation-is-not-applied-to-webkit-slider-thumb