[CSS] 變形

transition-property與transition-duration

transition-property:必須明確指定要轉變的是哪個屬性。

transition-duration:告訴瀏覽器轉變效果要持續多久一段時間,從開始狀態到結束狀態。

.banner-ad:hover{
  cursor:default;
  -webkit-transform: translate(75px, -25px) rotate(-45deg) scale(1.1);  /* 各種變形效果 */
  
  -webkit-transition-property: -webkit-transform;  /* 限定-webkit-transform發生效果 */
  -webkit-transition-duration: 1s ;  /* 初始狀態與結束狀態的過程中,所需要的時間 */
}

transition-timing-function(轉變調速)

此屬性可指定轉變期間所用之中間值的計算方法,也就是開始和結束之間的行動方式。

.banner-ad:hover{
  -webkit-transition-timing-function: ease;
}

可以指定的指,包含以下:

  • ease(緩和):此值會讓轉變效果和緩地開始,於中段加速,然後再減速結束。
  • linear(線性):開始、中段和結束全都以相同的恆定速度進行。
  • ease-in(漸進):此值會以慢速開始,於中段加速,然後持續直到結束。
  • ease-out(漸出):開始和中段的速度一致,然後在結束時減速。
  • ease-in-out(漸進漸出):此值會以慢速開始,於中段加速,然後在結束時減速。
  • step-start(跨入):此值會讓轉變效果立刻跳至結束,並停在該狀態。
  • step-end(跨出):此值會讓轉變效果停在開始狀態,直到指定時間結束時才突然轉變成結束狀態。

 

transition-delay(轉變延遲)

可指定轉變效果開始前的延遲時間。初始值為0s。

.banner-ad:hover{
  -webkit-transition-delay: .5s;  /* 表示500毫秒 */
}

 

使用transition來簡寫

語法如下:

transition: transition-property transition-duration transition-timing-function transition-delay;

例:以下設定規則組中的transform屬性產生1秒鐘的緩和調速轉變效果,還會使color屬性用2秒鐘的時間,以線性調速方式進行轉變。而且這兩個轉變效果都不延遲。

.banner-ad:hover{
  transition: transform 1s ease 0s, color 2s linear 0s;
}

 

轉變回正常狀態

當滑鼠指標移走時,會立刻跳回其開始狀態,但只要讓規則組套用同樣的transition(轉變)宣告即可,如:

  -webkit-transition: -webkit-transform 1s;

 

您可在此處留言

avatar

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料

  Subscribe  
Notify of