How do I achieve button smooth background transition on mobile device

Hi guys,

I've been working my random quote generator project and I want to achieve the effect that when I touch the button on mobile device the background color become semi-transparent. here is my code

#loadQuote {
  position: fixed;
  width: 12em;
  display: inline-block;
  left: 50%;
  margin-left: -6em;
  bottom: 50px;
  border-radius: 4px;
  border: 2px solid #fff;
  color: #fff;
  background-color: black;
  padding: 10px 0;
  transition: .5s ;
}

#loadQuote:active {
  background-color: rgba(255,255,255,.25);
  -webkit-transition: background-color 10ms linear;
     -ms-transition: background-color 10ms linear;
     transition: background-color 10ms linear;
}

I tried this out on google chrome emulator and it worked out fine but when I actually tried this on my iphone it doesn't have the effect as it should. I cannot think of why. and another weird thing is, at first I set the duration over which transitions should occur to 1000ms, the background changed really fast then I set them to be 10ms as in this case, the change appears much slowly and more noticeable. I was wondering why, shouldn't the animation last longer when the duration time is longer?

Here is the live demo for the project. https://zhenghaohe.github.io/random-quote-generator/

Thanks!