2019年10月電子商務(wù)網(wǎng)站設(shè)計百度推廣開戶
文章目錄
- 一、動畫序列
- 二、代碼示例 - 使用 from 和 to 定義動畫序列
- 三、代碼示例 - 定義多個動畫節(jié)點
一、動畫序列
定義動畫時 , 需要設(shè)置動畫序列 , 下面的 0% 和 100% 設(shè)置的是 動畫 在 運行到某個 百分比節(jié)點時 的 標(biāo)簽元素樣式狀態(tài) ;
@keyframes element-move { 0% { transform: translateX(500px); } 100% { transform: translateX(0); }
}
動畫序列 規(guī)則 :
0%是 動畫 的 開始狀態(tài) ;100%是 動畫 的 終止?fàn)顟B(tài) ;- 使用 百分比 可以 定義 動畫樣式 變化 的節(jié)點 , 也可以使用
from和to關(guān)鍵字 ; - 動畫 的 初始狀態(tài) 和 終止?fàn)顟B(tài) 的 樣式個數(shù) 是 任意多個 ;
- 動畫 的 執(zhí)行次數(shù) 是 任意多次 ;
二、代碼示例 - 使用 from 和 to 定義動畫序列
使用 from 和 to 關(guān)鍵字 定義 動畫序列 , 等價于 使用 0% 和 100% 定義的 動畫序列 ;
代碼示例 :
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>定義動畫</title><style>div {/* 設(shè)置動畫的主要作用元素 */width: 200px;height: 200px;background-color: pink;/* 設(shè)置動畫相關(guān)樣式 */animation-name: element-move;animation-duration: 1s;}@keyframes element-move {/* 定義動畫 */from {transform: translateX(500px);}to {transform: translateX(0);}}</style>
</head><body><div></div>
</body></html>
執(zhí)行結(jié)果 :
- 剛進入頁面后 , div 盒子模型出現(xiàn)在右側(cè) ;
- 1 秒內(nèi) , 上述盒子模型會自動走到最左側(cè) ;
三、代碼示例 - 定義多個動畫節(jié)點
使用 0% , 25% , 50% , 75% , 100% 定義的 動畫序列 中的 多個 動畫節(jié)點 ;
代碼示例 :
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>定義動畫</title><style>div {/* 設(shè)置動畫的主要作用元素 */width: 200px;height: 200px;background-color: pink;/* 設(shè)置動畫相關(guān)樣式 */animation-name: element-move;animation-duration: 1s;}@keyframes element-move {/* 定義動畫 */0% {/* 第一狀態(tài) / 默認狀態(tài) 在左上角 *//* 沒有任何變化 也可以空著 */transform: translate(0, 0);}25% {/* 第二狀態(tài) 走到右上角 */transform: translate(400px, 0);}50% {/* 第三狀態(tài) 走到右下角 */transform: translate(400px, 200px);}75% {/* 第四狀態(tài) 走到左下角 */transform: translate(0, 200px);}100% {/* 回到初始狀態(tài) *//* 第五狀態(tài) 走到左上角 */transform: translate(0, 0);}}</style>
</head><body><div></div>
</body></html>
執(zhí)行效果 : 執(zhí)行后 , 盒子模型 繞圈走 ;
