關(guān)于在手機(jī)端使用transition的奇怪問(wèn)題

我的問(wèn)題可能很菜。
最近在做一個(gè)random quote generator，希望在手機(jī)端上實(shí)現(xiàn)一個(gè)button被觸摸之后背景色漸變成半透明然后復(fù)原的效果。
現(xiàn)在是有一個(gè)button id=“l(fā)oadQuote”
css是

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

遇到的問(wèn)題有兩個(gè)。
第一個(gè)問(wèn)題是，我在電腦上使用chrome emulator調(diào)試時(shí)發(fā)現(xiàn)。 transition的時(shí)間設(shè)置的更長(zhǎng)反而動(dòng)畫(huà)效果更短，1000ms的時(shí)候一閃就過(guò)去了，10ms卻很清楚。難道不應(yīng)該是反過(guò)來(lái)嗎？
第二個(gè)問(wèn)題是，用這端代碼，在chrome emulator上移動(dòng)端看起來(lái)效果是正常的。有漸變動(dòng)畫(huà)。但是我把他上傳托管到github page然后放在自己的iPhone上看，卻發(fā)現(xiàn)沒(méi)有了動(dòng)畫(huà)。

我知道這個(gè)兩個(gè)問(wèn)題很菜，謝謝大家。