CSS3動畫效果之transition

時間 2019-11-30

標籤 css3 css 動畫效果 transition 欄目 CSS 简体版

原文原文鏈接

　　CSS3中有兩種方式實現動畫，transition和animation+@keyframe。html

　　二者的做用機制不同：transition定義在可能要進行動畫的元素上，對某些CSS屬性進行監聽，一旦CSS改變則進行動畫；animation定義在立刻要進行動畫的元素上，一旦定義動畫即進行。web

　　好比當鼠標懸浮的時候，某元素由紅色改成綠色。使用transition和animation實現的共同代碼以下：動畫

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            height: 200px;
            background-color: red;
            /*不一樣的代碼*/
        }
        div:hover {
            /*不一樣的代碼*/
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

　　使用transition的代碼量更少，簡介直觀。spa

div {
    width: 300px;
    height: 200px;
    background-color: red;
    transition: background-color 2s;
}
div:hover {
    background-color: green;
}

　　其中transition可做爲監聽器，監聽background-color的改變，一旦改變則以前的值做爲初始狀態，後來的值做爲終止狀態，進行整個過渡動畫。code

　　使用animation先要定義各類時間段的狀態，這裏只須要定義開始時間和結束時間，這個定義放在@keyframes中，anmation再調用這個keyframes。htm

div {
    width: 300px;
    height: 200px;
    background-color: red;
    -webkit-animation: test1 2s forwards;
}
div:hover {
    -webkit-animation: test2 2s forwards;
}
@-webkit-keyframes test1 {
    from {background-color: green;}
    to {background-color: red;}
}
@-webkit-keyframes test2 {
    from {background-color: red;}
    to {background-color: green;}
}

　　這裏定義了兩套動畫和關鍵幀，一套應用於普通狀態，一套應用於鼠標懸浮狀態。並且開始狀態的CSS和元素以前的CSS不要緊，須要從新定義。更須要注意的是，animation的表現和transition有一點不一樣，在頁面加載後會先執行普通狀態下的動畫一次。乍看一下，彷佛animation徹底不如transition好用，對於這個簡單的需求確實如此，但animation能夠應付一些更復雜的需求。blog

　　如下先從簡單的開始，也就是transition。animation

　　transition的意思不是動畫，而是過渡，從一個狀態過渡到另外一個狀態。這意味着這個動畫的執行包含三個要素，初始狀態、過渡、終止狀態。簡單的結構意味着簡單的實現和受限制的功能。transiton只包含四個屬性：it

transition-property: 要監聽的CSS屬性，若是有多個屬性，用逗號分隔，且不能用transition簡寫。
transition-duration: 動畫執行的時間。
transition-timing-function: 動畫執行的方式。linear（勻速） | ease（先快後慢，默認值） | ease-in（先慢後快） | ease-out（先快後慢） | ease-in-out（先慢中快後慢） | cubic-bezier(n, n, n, n) （貝塞爾曲線）
transition-delay: 動畫延遲執行的時間。

　　首先用transition-property監聽多個屬性，代碼以下：io

div {
    width: 300px;
    height: 200px;
    background-color: red;
    transition-property: background-color, width;
    transition-duration: 2s;
}
div:hover {
    background: green;
    width: 500px;
}

　　若是想移出鼠標不要當即執行動畫，而是等0.5秒，則代碼以下：

div {
    width: 300px;
    height: 200px;
    background-color: red;
    transition-property: background-color, width;
    transition-duration: 2s;
    transition-delay: .5s;
}
div:hover {
    background: green;
    width: 500px;
    transition-delay: 0;
}

　　transition-delay須要定義在普通狀態下的CSS中，由於移開鼠標後div當即恢復到普通狀態，讀取的是普通狀態下的CSS屬性。另外普通狀態下的CSS屬性會應用到hover狀態下，致使鼠標懸浮的動畫也延遲了0.5s，因此要在hover狀態下將此屬性定義爲0。

　　能夠看出，懸浮鼠標和移出鼠標都會執行動畫是由於定義在div中的transition-property和transition-duration一樣做用在了div:hover中，因此能夠定義transition: none移除某一階段的動畫。好比：

div {
    width: 300px;
    height: 200px;
    background-color: red;
    transition-property: background-color, width;
    transition-duration: 2s;   
}
div:hover {
    background: green;
    width: 500px;
    transition-property: none;
}

　　上面移除了懸浮鼠標的動畫效果。

　　可見，定義在元素上的transition是能夠做用於其僞類的，並在僞類狀態下再度運行動畫，那麼animation是否是同樣呢，好比：

div {
    width: 300px;
    height: 200px;
    background-color: red;
    -webkit-animation: test1 2s forwards;
}
@-webkit-keyframes test1 {
    from {background-color: green;}
    to {background-color: red;}
}