transition 的使用?

css3 css html5 transition

火爆浪子 2017-01-19 12:00:47 ‧ 4225 瀏覽

分享至

想問問transition 該如何使用？

我是去 https://santatracker.google.c...

發現這個效果
移過去會先放大，然後最後再縮小一點有點彈簧的感覺
這種效果該怎麼做？

我看到他transition 語法似乎是可以累加的？請問有大神能解釋原理嗎？

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

fillano

iT邦超人 1 級 ‧ 2017-01-19 14:35:39

最佳解答

參考我做的簡單範例：https://jsfiddle.net/fillano/2ufdwvsw/

MDN上的說明：Using CSS transitions
不過例子比較複雜（要看一下底下的瀏覽器相容性說明）

簡單說：

.btn1 {
  width: 50px;
  height: 50px;
  background-color: #336699;
  color: white;
  line-height: 48px;
  font-size: 36px;
  text-align:center;
  vertical-align: middle;
  transition: width 1s, height 1s, background-color 1s, line-height 1s, font-size 1s;
}

.btn1:hover {
  width: 60px;
  height: 60px;
  line-height: 58px;
  font-size: 43px;
  background-color: #4477AA;
  cursor: pointer;
}

我的範例中做了一個滑鼠移過去放大、變色的效果。如果沒有指定transition，這些變化是瞬間完成的。透過transition，你可以指定哪些變化要多久完成。我指定的有：width, height, background-color, line-height, font-size這幾項，延遲的時間都指定為1秒。