首頁 > web前端 > css教學 > 主體

CSS過渡transition

高洛峰
發布: 2017-02-24 11:33:54
原創
2061 人瀏覽過

前面的話

  透過過渡transition,可以讓web前端開發人員不需要javascript就可以實現簡單的動畫互動效果。過渡屬性看似簡單,但實際上它有許多需要注意的細節和容易混淆的地方。本文將介紹和整理關於CSS過渡的知識

 

定義

#  過渡transition是一個複合屬性,包括transition-property、transition-duration、transition-timing-function 、transition-delay這四個子屬性。透過這四個子屬性的配合來完成一個完整的過渡效果


transition-property: 过渡属性(默认值为all)
transition-duration: 过渡持续时间(默认值为0s)
transiton-timing-function: 过渡函数(默认值为ease函数)
transition-delay: 过渡延迟时间(默认值为0s)
登入後複製


  [注意]IE9-不支援該屬性,safari3 .1-6、IOS3.2-6.1、android2.1-4.3需要添加-webkit-前綴;而其餘高版本瀏覽器支援標準寫法


.test{
    height: 100px;
    width: 100px;
    background-color: pink;
    transition-duration: 3s;/*     以下三值为默认值,稍后会详细介绍 */
    transition-property: all;
    transition-timing-function: ease;
    transition-delay: 0s;
}    .test:hover{
    width: 500px;
}
登入後複製



<p class="test"></p>
登入後複製


//滑鼠移到元素上,會出現寬度變化效果


複合屬性

  過渡transition的這四個子屬性只有是必要值且不能為0。其中,都是時間。當兩個時間同時出現時,第一個是,第二個是;當只有一個時間時,它是,而為預設值0


transition: <transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay>
登入後複製


#  [注意]transition的這四個子屬性之間不能用逗號隔開,只能用空格隔開。因為逗號隔開的代表不同的屬性(transition屬性支援多值,多值部分稍後介紹);而空格隔開的代表不同屬性的四個關於過渡的子屬性


.test{
    height: 100px;
    width: 100px;
    background-color: pink;/*代表持续时间为2s,延迟时间为默认值0s*/
    transition;2s;}    .test:hover{
    width: 500px;
}
登入後複製



<p class="test"></p>
登入後複製
登入後複製




.test{
    height: 100px;
    width: 100px;
    background-color: pink;    /*代表持续时间为1s,延迟时间为2s*/
    transition: 1s 2s;
}    .test:hover{
    width: 500px;
}
登入後複製



<p class="test"></p>
登入後複製
登入後複製













##transition-property

  值: none | all | [,]*

  初始值: all

  應用於: 所有元素

  繼承性: 無

none: 没有指定任何样式
all: 默认值,表示指定元素所有支持transition-property属性的样式<transition-property>: 可过渡的样式,可用逗号分开写多个样式
登入後複製

可過渡的樣式


  不是所有的CSS樣式值都可以過渡,只有具有中間值的屬性才具備過渡效果


Vstart = 开始值; Vend = 结束值; Vres = 中间值; p = 过渡函数的输出值
Vres = (1 - p) * Vstart + p * Vend
当Vres具有有效值时,则该CSS样式可过渡
登入後複製


#
颜色: color background-color border-color outline-color
位置: backround-position left right top bottom
长度: 
    [1]max-height min-height max-width min-width height width
    [2]border-width margin padding outline-width outline-offset
    [3]font-size line-height text-indent vertical-align  
    [4]border-spacing letter-spacing word-spacing
数字: opacity visibility z-index font-weight zoom
组合: text-shadow transform box-shadow clip
其他: gradient
登入後複製

 

#過渡持續時間

  該屬性的單位是秒s或毫秒ms

transition-duration

  值:

  初始值: 0s

  套用於: 所有元素

  繼承性: 無

  [注意]該屬性不能為負值

  [注意]若該屬性為0s則為預設值,若為0則為無效值。所以必須帶單位

  [注意]該值為單值時,即所有過渡屬性都對應同樣時間;該值為多值時,過渡屬性按照順序對應持續時間


#

//DEMO中的过渡属性值transition-property: width,background;
登入後複製



 

CSS过渡transition 過渡延遲時間

  此屬性定義元素屬性延遲多少時間後來開始過渡效果,此屬性的單位是秒s或毫秒ms

transition-delay

  值:
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!