Zi 字媒體

此篇文章瀏覽量： 583 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;   若覺得文章有幫助，請多分享，讓其他同好也能吸收網站技能知識。 Tweet