css3中transition屬性詳解

不知名前端李小白 發表於 2022-01-14
CSS

css3中通過transition屬性可以實現一些簡單的動畫過渡效果~

1、語法

transition: property duration timing-function delay;

transition 屬性設定元素當過渡效果,是一個複合屬性,包括四個簡寫屬性:

  • transition-property:指定CSS屬性的name,transition效果(預設值:all)
  • transition-duration(必須):過渡效果持續時間(不指定預設為0,不會有任何效果
  • transition-timing-function:指定過渡效果的轉速曲線(預設值:ease)
  • transition-delay:指定過渡延遲開始時間(預設為0)

注意:IE9及以下不支援該屬性,safari3.1-6、IOS3.2-6.1、android2.1-4.3需要新增-webkit-字首;而其餘高版本瀏覽器支援標準寫法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
        .tra{
            width: 50px;
            height: 50px;
            background-color: lightcoral;
            /* 複合屬性 */
            transition: all 2s ease 0s;
            /* 採用以下分屬性也是可以的 */
            transition-duration: 2s;
            transition-property: all;
            transition-timing-function: ease;
            transition-delay: 0s;
        }
        .tra:hover{
            width: 200px;
        }
        </style>
    </head>
    <body>
        <div class="tra"></div>
    </body>
</html>

執行效果:

css3中transition屬性詳解

注意:在使用 transition 複合屬性時,各個屬性用空格隔開,不能使用 ,

2、分屬性

(1)transition-property

transition-property屬性可以指定需要過渡的css屬性,預設值為all表示所有屬性都過渡(不寫該屬性值也表示all),如果為none則沒有任何屬性存在過渡效果

.tra{
    width: 50px;
    height: 50px;
    background-color: lightcoral;
    /* 指定 width 屬性過渡 */
    transition: width 2s ease 0s;
}
.tra:hover{
    width: 200px;
    height: 100px;
}
<div class="tra"></div>

css3中transition屬性詳解

只指定 width 屬性過渡, height 屬性未指定

注意:並不是所有css屬性都可以過渡,只有具備中間值的屬性才有過渡效果,比如 display:block 不能過渡為 display:none 

 

(2)transition-duration

transition-duration屬性可以用來設定一個屬性過渡所需要的時間,也就是該屬性從舊值到新值過渡所需時間(持續時間),預設值為0s,不指定就沒有過渡效果

.tra{
    width: 50px;
    height: 50px;
    display: block;
    background-color: lightcoral;
    /* 此處transition-property省略,預設為all */
    /* 指定過渡時間為2s */
    transition: 2s ease 0s;
}
.tra:hover{
    width: 100px;
    height: 100px;
}

css3中transition屬性詳解

注意:

  • 不能為負值
  • 必須帶上單位,單獨一個數字無效
  • 該值為單值時,即所有過渡屬性都對應同樣時間;該值為多值時,過渡屬性按照順序對應持續時間
.tra{
    width: 50px;
    height: 50px;
    display: block;
    background-color: lightcoral;
    
    transition-property: width,background;
    transition-timing-function: ease;
    transition-duration: 5s, 2s;
    /* 以上分屬性等價於下面複合屬性寫法 */
    transition: width 5s ease 0, background 2s ease 0; 
}
.tra:hover{
    width: 100px;
    background-color: blue;
}

css3中transition屬性詳解

當該值為多值時,過渡屬性按照順序對應持續時間

 

(3)transition-timing-function

 transition-timing-function屬性指的是過渡的“緩動函式”,用來指定屬性過渡時動畫運動形式,值可以是關鍵字、貝塞爾曲線(bezier),預設值為ease

關鍵字:linear| ease| ease-in| ease-out| ease-in-out|

貝塞爾:cubic-bezier(n,n,n,n);

css3中transition屬性詳解

.tra{
    width: 50px;
    height: 50px;
    display: block;
    background-color: lightcoral;
    /* transition-timing-function預設值為ease */
    transition: 1s linear| ease| ease-in| ease-out| ease-in-out|;
}
.tra:hover{
    border-radius: 50%;
    background-color: blue;
}

 ease :開始和結束慢,中間快

css3中transition屬性詳解

 linear :勻速

css3中transition屬性詳解

 ease-in :開始慢,越來越快

css3中transition屬性詳解

 ease-out :結束慢,越來越慢

css3中transition屬性詳解

 ease-in-out :先加速後減速,與ease類似,但比ease幅度大

css3中transition屬性詳解

 cubic-bezier(n,n,n,n) 貝塞爾曲線中4個值隨意調整,就會得到不同的效果

.tra{
    width: 50px;
    height: 50px;
    display: block;
    background-color: lightcoral;
    transition: 1s cubic-bezier(.75,2.03,0,.14);
}
.tra:hover{
    border-radius: 50%;
    background-color: blue;
}

css3中transition屬性詳解

 

(4)transition-delay

transition-delay屬性指定過渡開始前的延遲時間

.tra{
    width: 50px;
    height: 50px;
    display: block;
    background-color: lightcoral;
    /* 2s過後過渡才開始執行 */
    transition: 1s cubic-bezier(.75,2.03,0,.14) 2s;
}
.tra:hover{
    border-radius: 50%;
    background-color: blue;
}

css3中transition屬性詳解

 

3、結束語

最後再說明補充兩點內容:

  1、觸發方式:transition屬性並非只有hover才能觸發,其他比如【點選事件】【獲得/失去焦點】【長按】等操作都可以觸發transition屬性過渡

  2、事件回撥:transition屬性只有一個事件,那就是transitionend事件,它在過渡事件完成後觸發

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
<style>
    #test{
        height: 60px;
        width: 60px;
        background-color: lightpink;
        transition: width 1.5s;
        font-size: 12px;
    }
    #test:hover{
        width: 250px;
    }
</style>
    </head>
    <body>
        <div id="test"></div>
    </body>
    <script>
        //監聽 transitionend 事件
        test.addEventListener("transitionend", myFunction);
        // 回撥函式
        function myFunction(e){
            e = e || event;
            test.innerHTML = "過渡結束,執行事件回撥內容"
        }
    </script>
</html>

css3中transition屬性詳解

 

相關文章