CSS動畫-transition/animation

• 2022 年 11 月 9 日
• 筆記
• 前端WEB

HTML系列：

• 人人都懂的HTML基礎知識-HTML教程(1)
• HTML元素大全(1)
• HTML元素大全(2)-表單

CSS系列：

• CSS基礎知識築基
• 常用CSS樣式屬性
• CSS選擇器大全48式
• CSS布局秘籍(1)-任督二脈BFC/IFC
• CSS布局秘籍(2)-6脈神劍
• CSS動畫-transition/animation

00、CSS動畫

CSS系列：

• CSS基礎知識築基
• 常用CSS樣式屬性
• CSS選擇器大全48式
• CSS布局秘籍(1)-任督二脈BFC/IFC
• CSS布局秘籍(2)-6脈神劍
• CSS動畫-transition/animation

CSS 動畫就是由一種狀態（CSS樣式），過渡到另一中狀態（CSS樣式）的動態過程，CSS中提供了兩種動畫實現方式：transition、animation。

01、transition過渡動畫

1.1、transition動畫

transition 過渡動畫是針對CSS樣式的變化，進行過渡，如width、opacity、color改變的過渡，可以實現CSS樣式的平滑動態過渡動畫效果。

transition 動畫本身並不會主動執行，須通過其他方式觸發，動畫屬性變化才會觸發執行。常用一些偽類觸發：:hover、:focus、:active（滑鼠按下激活）、:target（錨點元素id）、:checked，或者JS控制CSS樣式來觸發動畫執行。

🔸簡寫屬性：transiton: property duration timing-function delay

當transition-property指定的屬性值變化時，就會觸發動畫執行，且只對該屬性執行過渡動畫，設置all則任意屬性變化都會觸發動畫執行。

如下示例分析：

• 頁面初始載入時並不會觸發動畫執行。
• 當滑鼠移入時，屬性width、background-color值變化，觸發了動畫執行。
• 當鼠移出時，屬性width、background-color值回到初始狀態，再次觸發了動畫執行。

<div>
    <button onclick="active()">動起來</button>	
    <p class="goodstudy">好好學習</p>
</div>
<style>
    .goodstudy {
        background-color: #63a9e7;
        width: 150px; margin: 40px 0; padding: 8px;
        /* 設置動畫 頁面載入並不會執行 */
        transition-property: width,background-color;
        transition-duration: 1s;
        transition-delay: 0.2s;
        transition-timing-function: ease-out;
        transition: all 1s ease-out; 
    }
    .goodstudy:hover {
        width: 350px;
        background-color: red;
    }
    .active {
        transform: rotate(360deg);
        background-color: #0cdb39;
        transition: all 3s;
    }
</style>
<script>
    //通過腳本添加CSS類，觸發動畫執行
    const pnode = document.querySelector('.goodstudy');
    function active() {
        pnode.classList.add('active');
        //執行完移除，沒有事件只能定時執行移除動作
        setTimeout(() => {
            console.log('removed');
            pnode.classList.remove('active');
        }, 3000);
    }
</script>

1.2、transform變換

transform 可實現元素的各種圖形變換，如縮放、旋轉，及3D的變換，（transform /trænsˈfɔːrm/ 變換）。transform 本身並不是動畫，不過常用來配合transition來實現各種炫酷的變換動畫效果。

3D坐標系的手勢圖：

<div>
    <button onclick="active()">動起來</button>
    <p class="goodstudy">好好學習</p>
    <p class="ddup">天天向上</p>
</div>
<style>
    .ddup{
        background-color: #0cdb39;
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;

        transition: all 1s ease-out;
        transform: skew(-30deg);   
    }
    .ddup:hover{
        transform: translateX(-30px);   /* transform只有一個生效，被後面的覆蓋了*/
        transform: rotateX(180deg);     /* 圍繞x軸3d旋轉*/
    }
</style>

02、animation幀動畫

CSS 動畫 animation幀動畫，動畫的實際CSS樣式是由 @keyframes 規則實現的，animation屬性負責設置動畫的各項運動參數。

2.1、animation

🔸簡寫屬性：animation: name duration timing-function delay iteration-count direction fill-mode play-state

<div class="div-abox">
    斷腸人在天涯
</div>
<style>
    .div-abox {
        padding: 4px;
        width: 150px;
        background-color: red;
        animation-delay: 1s;
        animation-duration: 1s;
        animation-name: box-line-ani;
        animation-direction: alternate;            /*動畫交替反向運行*/
        animation-iteration-count: infinite;       /*無限重複*/
        animation-fill-mode: both;
        animation-timing-function: cubic-bezier(.4, .52, .93, .4);
        /*animation 簡寫屬性*/
        animation: box-line-ani 1.5s alternate 4 cubic-bezier(.4, .52, .93, .4) both;
    }
    .div-abox:hover {   /* 滑鼠懸浮時運動加速 */
        animation-duration: 0.5s;
    }
    @keyframes box-line-ani {
        0% {
            background-color: white;
            width: 150px;
        }
        40% { width: 250px; }
        100% {
            background-color: #63a9e7;
            width: 400px;
        }
    }
</style>

2.2、@keyframes關鍵幀

animation 屬性定義動畫各項運動參數，實際的動畫執行的CSS屬性通過@keyframes來定義，使用@keyframes建立兩個或兩個以上關鍵幀來實現動畫幀的樣式定義。

@keyframes animationname { keyframes-selector { css-styles; } }

1. 定一個關鍵幀動畫組，並命名：@keyframes animation-name {}
2. 用百分比%來定動畫幀：
   • 0% 表示開始第一幀樣式，可以用別名from代替。
   • 100% 表示最後一幀樣式，可以用別名to代替。
   • 中間可以加其他%* 關鍵幀。
3. 每一幀里定義需要執行動畫變換的CSS樣式。

@keyframes animation-name {
    0% {
        background-color: white;
        width: 150px;
    }
    40% { width: 250px; }
    100% {
        background-color: #63a9e7;
        width: 400px;
    }
}

2.3、animation-timing-function動畫緩動曲線

animation-timing-function 用來定義動畫執行過程的緩動速度，內置了幾個常用的函數定義關鍵字，及兩個關鍵函數。同transition 動畫中的緩動速度屬性 transition-timing-function 是一樣的，同母異父的親兄妹。

• 三次貝塞爾曲線緩動函數：cubic-bezier(x1, y1, x2, y2)（cubic /ˈkjuːbɪk/ 立方），參數其實是兩個坐標點，可以通過在線貝塞爾可視化工具編輯和測試。用來實現動畫過程中速度變化曲線的控制，以實現更自然的動畫效果。內置的linear、ease等都是基於貝塞爾曲線函數的。
• 步驟緩動函數：steps()，把@keyframes定義的動畫幀劃分為多段執行，多用來實現圖片的逐幀動畫效果。

2.4、動畫事件

用於監聽動畫的開始、循環、結束的動畫事件 AnimationEvent

<script>
    const node = document.querySelector('.div-abox');
    node.addEventListener('animationend', (e) => {
        console.log(e.animationName, e.type, e.elapsedTime);
        //box-line-ani animationend 1
    })
</script>

參考資料

• 入淺出 CSS 動畫
• CSS3 3D transform變換

©️版權申明：版權所有@安木夕，本文內容僅供學習，歡迎指正、交流，轉載請註明出處！原文編輯地址-語雀