Question: 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?

Answer: 
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
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](http://davidwalsh.name/pseudo-element-animation) for a simple way to detect animation support on a pseudo-element.