Day24 CSS Animation 動畫

2021 iThome 鐵人賽

DAY 24

Modern Web

我的網頁前端小小小教室系列第 24 篇

13th鐵人賽

karta1366796

團隊imac_跳過這篇

2021-10-08 00:25:03

891 瀏覽

分享至

昨天介紹完了transition動畫，今天要介紹Animation動畫，兩者有甚麼區別呢? Animation動畫可以控制的細節更多，而且不需要觸發條件，可以直接進行動畫，至於要怎麼設定，就讓我們看下去。

Animation

先讓我們看看這個可以設定的屬性有哪些?

animation: name duration timing-function delay iteration-count direction fill-mode;

animation:動畫名稱播放時間延遲執行的時間速度次數方向填充模式播放狀態

動畫名稱name:在開始動畫前，我們要先設定關鍵影格(keyframes)，他是在甚麼時間點，這個動畫的樣子，例如我0秒時要是正方形，動畫跑到最後要是圓形。就可以這樣設置。中間得時間是依造你動畫設定幾秒去分配。

radius是你自己取的動畫名稱，取甚麼都可以。
設定這個動畫長時間為5秒。
0%是指在0秒時這個動畫圓角是0，
100%是指在5秒時這個動畫圓角為100%。

播放時間duration:整個動畫的時間。
延遲執行的時間delay:延遲幾秒後開始播放動畫。
速度timing-function:動畫播放的速度。
次數iteration-count:動畫要播放幾次。
實用的重複播放屬性，infinite。
方向direction:可以設定要不要來回播放。
實用的來回播放屬性:alternate。
填充模式fill-mode:設定動畫開始或結束的時候，會是初始影格還是最終影格的狀態。

我們來看下面簡單的例子。

    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: yellow;
            animation: radius 2s;
        }


        @keyframes radius{
            0%{ border-radius: 0;}
            100%{ border-radius: 100%;}
        }
    </style>

<body>
    <div class="box">
    </div>
</body>

我們初始影格是沒有圓角，而結束時圓角100%，動畫時間兩秒。

這就是一個最簡單的Animation動畫，而我們還有很多屬性沒有設定到。

再來看第二個粒子

我想要初始影格是圓角50%，最終影格是圓角0%，動畫時間1秒，延遲時間0.5秒，次數無限循環，方向重複播放。

<style>
        .box{
            width: 200px;
            height: 200px;
            background-color: yellow;
            animation: radius 1s .5s ease infinite alternate;
        }


        @keyframes radius{
            0%{ border-radius: 50%;}
            100%{ border-radius: 0%;}
        }
    </style>
<body>
    <div class="box">
    </div>
</body>

套用到我們網頁的例子

.banner{
            position: relative;
            margin-bottom: 305px;
        }
        
.banner .aimg1{
            width: 100%;
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            filter: alpha(opacity=0);
            animation: silder 10s linear infinite ;
        }

        .banner .aimg2{
            width: 100%;
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            filter: alpha(opacity=0);
            animation: silder2 10s linear infinite ;
            
        }

        @keyframes silder {
            10% {
                opacity: 1;
                filter: alpha(opacity=100);
            }
            40% {
                opacity: 1;
                filter: alpha(opacity=100);
            }
            50% {
                opacity: 0;
                filter: alpha(opacity=0);
            }
            100% {
                opacity: 0;
                filter: alpha(opacity=0);
            }
        }

        @keyframes silder2 {
            50% {
                opacity: 0;
                filter: alpha(opacity=00);
            }
            60% {
                opacity: 1;
                filter: alpha(opacity=100);
            }
            90% {
                opacity: 1;
                filter: alpha(opacity=100);
            }
            100% {
                opacity: 0;
                filter: alpha(opacity=0);
            }
        }