css3中transition屬性詳解

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

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>

執行效果：

注意：在使用 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>

只指定 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;
}

注意：

  • 不能為負值
  • 必須帶上單位，單獨一個數字無效
  • 該值為單值時，即所有過渡屬性都對應同樣時間；該值為多值時，過渡屬性按照順序對應持續時間
.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;
}

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

 

（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 ：開始和結束慢，中間快

 linear ：勻速

 ease-in ：開始慢，越來越快

 ease-out ：結束慢，越來越慢

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

 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;
}

 

（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;
}

 

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>

 

相關文章