|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
【實(shí)例】詳解 CSS3 animation 6個(gè)動(dòng)畫屬性
作者:admin 時(shí)間:2022-3-16 13:26:29 瀏覽:CSS3 animation 有6個(gè)動(dòng)畫屬性：
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
其語(yǔ)法是
animation: name duration timing-function delay iteration-count direction;
關(guān)于各屬性的描述如下表所示
| 值 | 描述 |
|---|---|
| animation-name | 規(guī)定需要綁定到選擇器的 keyframe 名稱 |
| animation-duration | 規(guī)定完成動(dòng)畫所花費(fèi)的時(shí)間，以秒或毫秒計(jì)。 |
| animation-timing-function | 規(guī)定動(dòng)畫的速度曲線。 |
| animation-delay | 規(guī)定在動(dòng)畫開始之前的延遲。 |
| animation-iteration-count | 規(guī)定動(dòng)畫應(yīng)該播放的次數(shù)。 |
| animation-direction | 規(guī)定是否應(yīng)該輪流反向播放動(dòng)畫。 |
實(shí)例介紹
例如animation的語(yǔ)句如下：
animation: box_move 1s linear 2s alternate forwards;
那么各屬性值的解釋如下：
/* 1. 通過(guò)動(dòng)畫集名稱調(diào)用動(dòng)畫 */
animation-name: box_move;
/* 2.設(shè)置動(dòng)畫執(zhí)行時(shí)間 */
animation-duration: 1s;
/* 3. 設(shè)置動(dòng)畫的速度類型 */
animation-timing-function: linear;
/* 4. 設(shè)置延時(shí)執(zhí)行時(shí)間 */
animation-delay: 2s;
/* 5. 動(dòng)畫默認(rèn)執(zhí)行次數(shù)是1次, infinite: 無(wú)限次 */
animation-iteration-count: infinite;
/* 6. 設(shè)置動(dòng)畫逆播【動(dòng)畫怎么正著播放，倒著播放的時(shí)候也是一樣的效果】 normal*/
animation-direction: alternate;
/* 7. 設(shè)置動(dòng)畫執(zhí)行完后的一個(gè)狀態(tài): 讓動(dòng)畫停在結(jié)束時(shí)候的狀態(tài) */
animation-fill-mode: forwards;
需要明白的是，box_move 是動(dòng)畫名稱，即是動(dòng)畫集名稱，通過(guò)動(dòng)畫名稱調(diào)用動(dòng)畫集，如下代碼：
@keyframes box_move {
from {}
to {}
}通過(guò)以上書寫，一個(gè)完整的animation才算完整，也即是一個(gè)animation需包含兩部分，一部分是animation復(fù)合屬性語(yǔ)句，另一部分是動(dòng)畫集代碼。
案例1：移動(dòng)的盒子
案例效果：
1、盒子先水平向右移動(dòng)100px，接下來(lái)向下移動(dòng)100px。
2、然后向左移動(dòng)100px，最后向上移動(dòng)100px又回到原點(diǎn)。
3、其中每次改變方向都要變化背景顏色，循環(huán)往復(fù)執(zhí)行。
完整HTML代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
.box {
width: 30px;
height: 30px;
background-color: blue;
animation: move 8s linear infinite forwards;
}
@keyframes move {
from {
}
25% {
transform: translateX(100px);
background-color: red;
}
50% {
transform: translateX(100px) translateY(100px);
background-color: green;
}
75% {
transform: translateX(0px) translateY(100px);
background-color: yellow;
}
to {
transform: translateY(0px);
background-color: blue;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
此案例中，animation語(yǔ)句為：animation: move 8s linear infinite forwards; 其中move是動(dòng)畫集名稱，8s為動(dòng)畫執(zhí)行時(shí)間，linear是動(dòng)畫的速度類型（勻速），infinite表示運(yùn)動(dòng)無(wú)限循環(huán)，forwards表示動(dòng)畫結(jié)束時(shí)保持狀態(tài)不變。
案例2：拋物線
完整HTML代碼
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
body {
position: relative;
background:#eee;
}
.animation {
margin:100px 100px;
position: absolute;
width: 50px;
height: 50px;
border-radius: 25px;
background-color: #ed3;
animation: r 1.5s linear 0s infinite forwards,
l 1.5s cubic-bezier(0, 0, 1, 0) 0s infinite forwards;
}
@keyframes r {
from {
left: 0;
}
to {
left: 120px;
}
}
@keyframes l {
from {
top: 0;
}
to {
top: 340px;
}
}
</style>
</head>
<body>
<div class="animation"></div>
</body>
</html>
本案例中，animation語(yǔ)句中間出現(xiàn)了一個(gè)逗號(hào)，說(shuō)明animation的動(dòng)畫是可以同時(shí)由多個(gè)動(dòng)畫集組成的，此案例使用了兩個(gè)動(dòng)畫集，r和l，這里還出現(xiàn)了0s的屬性值，說(shuō)明動(dòng)畫延時(shí)執(zhí)行時(shí)間為0s。
總結(jié)
通過(guò)本文的學(xué)習(xí)，我們應(yīng)該了解CSS3 animation動(dòng)畫屬性的固有寫法模式，應(yīng)該清楚它是有兩部分組成。我們需要另外了解它6個(gè)屬性值的具體含義，這樣才能更準(zhǔn)確的作出符合自己預(yù)期的動(dòng)畫來(lái)。
您可能對(duì)以下文章也感興趣
- 站長(zhǎng)推薦
