我的問題可能很菜。
最近在做一個random quote generator，希望在手機(jī)端上實現(xiàn)一個button被觸摸之后背景色漸變成半透明然后復(fù)原的效果。
現(xiàn)在是有一個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;
}

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

我知道這個兩個問題很菜，謝謝大家。