css3動畫詳解
一.Keyframes介紹:
Keyframes被稱為關鍵幀,[email protected]rames”開頭,後面緊跟著是動畫名稱加上一對花括號“{…}”,括號中就是一些不同時間段樣式規則。
@keyframes changecolor{
0%{
background: red;
}
100%{
background: green;
}
}
示例:創建一個動畫名叫“changecolor”,在“0%”時背景色為red,在20%時背景色為blue,在40%背景色為orange,在60%背景色為green,在80%時背景色yellow,在100%處時背景色為red。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css3動畫</title>
<style>
@keyframes changecolor{
0%{
background: red;
}
20%{
background:blue;
}
40%{
background:orange;
}
60%{
background:green;
}
80%{
background:yellow;
}
100%{
background: red;
}
}
div {
width: 300px;
height: 200px;
background: red;
color:#fff;
margin: 20px auto;
}
div:hover {
animation: changecolor 5s ease-out .2s;
}
</style>
</head>
<body>
<div>hover顏色改變</div>
</body>
</html>
二.設置動畫播放方式
語法規則:
animation-timing-function:ease(由快到慢,逐漸變慢) | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*
Paste_Image.png
三.設置動畫播放方向
animation-direction屬性主要用來設置動畫播放方向,其語法規則如下:
animation-direction:normal | alternate [, normal | alternate]*
其主要有兩個值:normal、alternate
1、normal是默認值,如果設置為normal時,動畫的每次循環都是向前播放;
2、另一個值是alternate,他的作用是,動畫播放在第偶數次向前播放,第奇數次向反方向播放。
四.設置動畫的播放狀態
animation-play-state屬性主要用來控制元素動畫的播放狀態。
參數:
其主要有兩個值:running和paused。
其中running是其默認值,主要作用就是類似於音樂播放器一樣,可以通過paused將正在播放的動畫停下來,也可以通過running將暫停的動畫重新播放,這裏的重新播放不一定是從元素動畫的開始播放,而是從暫停的那個位置開始播放。另外如果暫停了動畫的播放,元素的樣式將回到最原始設置狀態。
例如,頁面加載時,動畫不播放。代碼如下:
animation-play-state:paused;
五.設置動畫時間外屬性
animation-fill-mode屬性定義在動畫開始之前和結束之後發生的操作。主要具有四個屬性值:none、forwards、backwords和both。其四個屬性值對應效果如下:
屬性值 效果
none 默認值,表示動畫將按預期進行和結束,在動畫完成其最後一 幀時,動畫會反轉到初始幀處
forwards 表示動畫在結束後繼續應用最後的關鍵幀的位置
backwards 會在向元素應用動畫樣式時迅速應用動畫的初始幀
both 元素動畫同時具有forwards和backwards效果
在默認情況之下,動畫不會影響它的關鍵幀之外的屬性,使用animation-fill-mode屬性可以修改動畫的默認行為。簡單的說就是告訴動畫在第一關鍵幀上等待動畫開始,或者在動畫結束時停在最後一個關鍵幀上而不回到動畫的第一幀上。或者同時具有這兩個效果。
例如:讓動畫停在最一幀處。代碼如下:
animation-fill-mode:forwards;
學習過程中遇到什麽問題或者想獲取學習資源的話,歡迎加入學習交流群
343599877,我們一起學前端!
css3動畫詳解