首頁 網頁資源RESOURCES CSS
CSS動畫系數沒這麼難!讓網頁裡的圖片、文字動起來!

CSS動畫系數沒這麼難!讓網頁裡的圖片、文字動起來!

2021.11.18
下面整理基本上會使用到的參數,跟著公式往下跑
文字浮現,圖片移動都不再是夢想
先試著練習一次,再用自己的想法改變
你的網站將不再是一個靜態生硬的網站囉!
animation-name
動畫名稱(來自@keyframes)
ex. animation-name: <你的動畫名稱>
展示
播放動畫
HTML
複製已複製
<div class="shape-ex1"></div>
CSS
複製已複製
.shape-ex1{
    width: 100px;
    height: 100px;
    background-color: #666;
    margin: 0 auto;
    opacity: 0;
    animation-name: fade;
    animation-duration: 2s;
}
@keyframes fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
animation-duration
動畫持續時間
ex. animation-duration: <持續秒數>
展示
播放動畫
HTML
複製已複製
<div class="shape-ex2"></div>
CSS
複製已複製
.shape-ex2{
    width: 100px;
    height: 100px;
    background-color: #666;
    margin: 0 auto;
    opacity: 0;
    animation-name: fade;
    animation-duration: 2s;
}
@keyframes fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
animation-timing-function
動畫播放速度
動畫計時函數使用稱為三次貝塞爾曲線的數學函數來製作速度曲線。
您可以在此函數中使用自己的值,或使用預定義值之一。
ex. animation-timing-function: <自定義速度曲線或預定義值的名稱>
展示
播放動畫
HTML
複製已複製
<div class="shape-ex3"></div>
CSS
複製已複製
.shape-ex3{
    width: 100px;
    height: 100px;
    background-color: #666;
    margin: 0 auto;
    opacity: 0;
    animation-name: fade;
    animation-duration: 2s;
    animation-timing-function: linear;
}
@keyframes fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
animation-delay
動畫延遲
如果設定播放次數大於兩次,只有第一次執行會有延遲
ex. animation-delay: <持續秒數>
展示
播放動畫
HTML
複製已複製
<div class="shape-ex4"></div>
CSS
複製已複製
.shape-ex4{
    width: 100px;
    height: 100px;
    background-color: #666;
    margin: 0 auto;
    opacity: 0;
    animation-name: fade;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-delay: 2s;
}
@keyframes fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
animation-iteration-count
動畫播放次數
填寫播放次數,可以填寫 infinite 讓動畫無限播放
ex. animation-iteration-count: <播放次數或者infinite>
展示
播放動畫
HTML
複製已複製
<div class="shape-ex5"></div>
CSS
複製已複製
.shape-ex5{
    width: 100px;
    height: 100px;
    background-color: #666;
    margin: 0 auto;
    opacity: 0;
    animation-name: fade;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: 1;
}
@keyframes fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
animation-direction
動畫播放的方向
依參數來判斷動畫播放的方向,預設是由@keyframes的0%到100%
normal是0%~100% | reverse是100%~0% | alternate是0%~100%~0% | alternate-reverse是100%~0%~100%
alternate、alternate-reverse都需要播放次數2次以上
ex. animation-direction: < normal 或 reverse 或 alternate 或 alternate-reverse >
展示
播放動畫
HTML
複製已複製
<div class="shape-ex6"></div>
CSS
複製已複製
.shape-ex6{
    width: 100px;
    height: 100px;
    background-color: #666;
    margin: 0 auto;
    opacity: 0;
    animation-name: fade;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: 2;
    animation-direction: alternate-reverse;
}
@keyframes fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
animation-fill-mode
元素套用動畫開始或結束時的樣式
依參數來判斷動畫在開始或結束時的樣式
none
不會套用任何動畫樣式
backwards
動畫一開始(包括animation-delay的時間),元素就使用動畫開始時樣式
forwards
動畫結束後,元素套用動畫結束當下時的樣式
both
forwards與backwards結合
ex. animation-fill-mode: < none 或 backwards 或 forwards 或 both >
展示
播放動畫
HTML
複製已複製
<div class="shape-ex7"></div>
CSS
複製已複製
.shape-ex7{
    width: 100px;
    height: 100px;
    background-color: #666;
    margin: 0 auto;
    animation-name: red_to_black;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: 2;
    animation-direction: alternate-reverse;
    animation-fill-mode: both;
}
@keyframes red_to_black {
    from {
        background-color: white;
    }
    to {
        background-color: black;
    }
}
其他類別