碼上快樂

相關內容    簡體    繁體

css3-動畫animation詳解及其案例

本文轉載自   查看原文   2020-04-20 09:29   769 

本文重點：介紹css3動畫的知識點以及案例(兩個以上)，動畫和transition過渡的區別

css3動畫

　　通過 CSS3，我們能夠創建動畫，這可以在許多網頁中取代動畫圖片、Flash 動畫以及 JavaScript。

gif動態圖片比較浪費資源，我們可以使用動畫使靜態圖片動起來。

　　　　　　　　   

關鍵幀的定義

　　不同於過渡動畫只能定義首尾兩個狀態，關鍵幀動畫可以定義多個狀態，或者用關鍵幀的話來說，過渡動畫只能定義第一幀和最后一幀這兩個關鍵幀，而關鍵幀動畫則可以定義任意多的關鍵幀，因而能實現更復雜的動畫效果。

@keyframes mymove{
　　from{初始狀態屬性}
　　to{結束狀態屬性}
}
或
@keyframes mymove{
　　0%{初始狀態屬性}
　　50%（中間再可以添加關鍵幀）
　　100%{結束狀態屬性}
}

animation

  • animation-name

    • 檢索或設置對象所應用的動畫名稱

    • 必須與規則@keyframes配合使用， eg:@keyframes mymove{} animation-name:mymove;

  • animation-duration

    • 檢索或設置對象動畫的持續時間

    • 說明：animation-duration:3s; 動畫完成使用的時間為3s

  • animation-timing-function

    • 檢索或設置對象動畫的過渡類型

    • 屬性值

      • linear：線性過渡。等同於貝塞爾曲線(0.0, 0.0, 1.0, 1.0)

      • ease：平滑過渡。等同於貝塞爾曲線(0.25, 0.1, 0.25, 1.0)

      • ease-in：由慢到快。等同於貝塞爾曲線(0.42, 0, 1.0, 1.0)

      • ease-out：由快到慢。等同於貝塞爾曲線(0, 0, 0.58, 1.0)

      • ease-in-out：由慢到快再到慢。等同於貝塞爾曲線(0.42, 0, 0.58, 1.0)

      • step-start:馬上跳到動畫每一結束楨的狀態

  • animation-delay

    • 檢索或設置對象動畫延遲的時間

    • 說明：animation-delay:0.5s; 動畫開始前延遲的時間為0.5s)

  • animation-iteration-count

    • 檢索或設置對象動畫的循環次數

    • 屬性值

      • animation-iteration-count: infinite | number;

      • infinite：無限循環

      • number: 循環的次數

  • animation-direction

    • 檢索或設置對象動畫在循環中是否反向運動

    • 屬性值

      • normal：正常方向

      • reverse：反方向運行

      • alternate：動畫先正常運行再反方向運行，並持續交替運行

      • alternate-reverse：動畫先反運行再正方向運行，並持續交替運行

  • animation-play-state

    • 檢索或設置對象動畫的狀態

    • 屬性值

      • animation-play-state:running | paused;

      • running:運動

      • paused: 暫停

      • animation-play-state:paused; 當鼠標經過時動畫停止，鼠標移開動畫繼續執行

　　簡寫

　　　　animation:動畫名稱 動畫持續時間 動畫的過渡類型 延遲的時間 定義循環次數 定義動畫方式

animation vs transition

  • 相同點：都是隨着時間改變元素的屬性值。

  • 不同點：transition需要觸發一個事件(hover事件或click事件等)才會隨時間改變其css屬性； 而animation在不需要觸發任何事件的情況下也可以顯式的隨着時間變化來改變元素css的屬性值，從而達到一種動畫的效果，css3的animation就需要明確的動畫屬性值

 第一個案例代碼：原圖如下

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 180px;
            height: 300px;
            background: url(./images/bg.png);
            margin: 100px auto;
            animation:imgMore 1s step-start infinite ;
        }
        @keyframes imgMore {
            0%{
                background-position: 0 0;
            }
            14.3%{
                background-position: -180px 0;
            }
            28.6%{
                background-position: -360px 0;
            }
            42.9%{
                background-position: -540px 0;
            }
            57.2%{
                background-position: -720px 0;
            }
            71.5%{
                background-position: -900px 0;
            }
            85.8%{
                background-position: -1080px 0;
            }
            100%{
                background-position: -1260px 0;
            }
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
</body>
</html>
 

第二個案例代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            height: 200px;
            width: 150px;
            margin: 100px auto;
            position: relative;
        }
        .box div{
            width: 50px;
            height: 50px;
            border: 1px blue solid;
            border-radius: 100%;
            position: absolute;
            left: 0;right: 0;
            top: 0;bottom: 0;
            margin: auto;
            transform:scale(0);
            opacity: 0;
        }
        .box .box6{
            width: 10px;
            height: 10px;
            background-color: blueviolet;
            transform:scale(1);
            opacity: 1;
        }
        .box1{
            animation: boxMore 5s linear infinite;
        }
        .box2{
            animation: boxMore 5s 1s linear infinite;
        }
        .box3{
            animation: boxMore 5s 2s linear infinite;
        }
        .box4{
            animation: boxMore 5s 3s linear infinite;
        }
        .box5{
            animation: boxMore 5s 4s linear infinite;
        }
        @keyframes boxMore{
            0%{
                transform:scale(0);
                opacity: 0;
            }
            25%{
                transform:scale(1);
                opacity: 0.5; 
            }
            50%{
                transform:scale(2);
                opacity: 1;  
            }
            75%{
                transform:scale(3);
                opacity: 0.5;  
            }
            100%{
                transform:scale(4);
                opacity: 0;  
            }
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
        <div class="box5"></div>
        <div class="box6"></div>
    </div>
</body>
</html>

如果感覺對自己有幫助，麻煩點一下關注，會一直盒大家分享知識的，謝謝！！！

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 css3-轉換 旋轉 過渡 動畫 css3學習--css3動畫詳解一(animation屬性） CSS animation動畫 CSS3(4)---動畫(animation) CSS動畫 animation與transition css的動畫animation CSS動畫(animation) CSS動畫Animation css動畫(transition/transform/animation) CSS3動畫之animation屬性
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM