I need to click on the car wheel , so the car advance 100px ,, the wheel in this case is "after" , but the transition is not working with ":after:active" selectors but it does with other selectors . how can I correct this ? 

PS: I'm using chrome.

```
#Car{
height: 30%;
width: 30%;
background-color: blue;
position:relative;
bottom:20%;
left: 30%;
top:-40%;
border-top-right-radius : 20% 30%;
border-bottom-right-radius : 20% 30%;}

 #Car:after{
 content:"";
 height: 50%;
 width: 20%;
 position: absolute;
 left: 50%;
 top:90%;
 border-radius: 50%;
 background: #cc7b0f;
 border: 10px solid grey;
 z-index:6;
 }

 #Car:after:active{
 transform: translate(100px, 0px);
 transition:ease-in-out;
 }

```