2023-4-26 前端達人
目錄
動畫（animation）是CSS3中具有顛覆性的特征之一，可通過設置多個節點來精確控制一個或一組動畫，常 用來實現復雜的動畫效果。
相比較過渡，動畫可以實現更多變化，更多控制，連續自動播放等效果。
制作動畫分為兩步： 1.先定義動畫 2.再使用（調用）動畫
1. 用keyframes 定義動畫（類似定義類選擇器）
@keyframes 動畫名稱 {
0%{
width:100px;
}
100%{
width:200px;
}
}
動畫序列
0% 是動畫的開始，100% 是動畫的完成。這樣的規則就是動畫序列。
在 @keyframes 中規定某項 CSS 樣式，就能創建由當前樣式逐漸改為新樣式的動畫效果。
動畫是使元素從一種樣式逐漸變化為另一種樣式的效果。您可以改變任意多的樣式任意的次數。
請用百分比來規定變化發生的時間，或用關鍵詞 "from" 和 "to"，等同于 0% 和 100%。
2. 元素使用動畫
div {
width: 200px;
height: 200px;
background-color: aqua;
margin: 100px auto; /* 調用動畫 */
animation-name: 動畫名稱;
/* 持續時間 */ animation-duration: 持續時間; }
-
<!DOCTYPE html>
-
<html lang="en">
-
-
<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>
-
/* 我們想頁面一打開，一個盒子就從左邊走到右邊 */
-
/* 1. 定義動畫 */
-
-
@keyframes move {
-
/* 開始狀態 */
-
0% {
-
transform: translateX(0px);
-
}
-
/* 結束狀態 */
-
100% {
-
transform: translateX(1000px);
-
}
-
}
-
-
div {
-
width: 200px;
-
height: 200px;
-
background-color: pink;
-
/* 2. 調用動畫 */
-
/* 動畫名稱 */
-
animation-name: move;
-
/* 持續時間 */
-
animation-duration: 2s;
-
}
-
</style>
-
</head>
-
-
<body>
-
<div></div>
-
</body>
-
-
</html>
-
<!DOCTYPE html>
-
<html lang="en">
-
-
<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>
-
/* from to 等價于 0% 和 100% */
-
/* @keyframes move {
-
from {
-
transform: translate(0, 0);
-
}
-
to {
-
transform: translate(1000px, 0);
-
}
-
} */
-
/* 動畫序列 */
-
/* 1. 可以做多個狀態的變化 keyframe 關鍵幀 */
-
/* 2. 里面的百分比要是整數 */
-
/* 3. 里面的百分比就是 總的時間（我們這個案例10s）的劃分 25% * 10 = 2.5s */
-
-
@keyframes move {
-
0% {
-
transform: translate(0, 0);
-
}
-
25% {
-
transform: translate(1000px, 0)
-
}
-
50% {
-
transform: translate(1000px, 500px);
-
}
-
75% {
-
transform: translate(0, 500px);
-
}
-
100% {
-
transform: translate(0, 0);
-
}
-
}
-
-
div {
-
width: 100px;
-
height: 100px;
-
background-color: pink;
-
animation-name: move;
-
animation-duration: 10s;
-
}
-
</style>
-
</head>
-
-
<body>
-
<div>
-
-
</div>
-
</body>
-
-
</html>
-
<!DOCTYPE html>
-
<html lang="en">
-
-
<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>
-
@keyframes move {
-
0% {
-
transform: translate(0, 0);
-
}
-
100% {
-
transform: translate(1000px, 0);
-
}
-
}
-
-
div {
-
width: 100px;
-
height: 100px;
-
background-color: pink;
-
/* 動畫名稱 */
-
animation-name: move;
-
/* 持續時間 */
-
/* animation-duration: 2s; */
-
/* 運動曲線 */
-
/* animation-timing-function: ease; */
-
/* 何時開始 */
-
animation-delay: 1s;
-
/* 重復次數 iteration 重復的 conut 次數 infinite 無限 */
-
/* animation-iteration-count: infinite; */
-
/* 是否反方向播放 默認的是 normal 如果想要反方向 就寫 alternate */
-
/* animation-direction: alternate; */
-
/* 動畫結束后的狀態 默認的是 backwards 回到起始狀態 我們可以讓他停留在結束狀態 forwards */
-
/* animation-fill-mode: forwards; */
-
/* animation: name duration timing-function delay iteration-count direction fill-mode; */
-
/* animation: move 2s linear 0s 1 alternate forwards; */
-
/* 前面2個屬性 name duration 一定要寫 */
-
/* animation: move 2s linear alternate forwards; */
-
}
-
-
div:hover {
-
/* 鼠標經過div 讓這個div 停止動畫，鼠標離開就繼續動畫 */
-
animation-play-state: paused;
-
}
-
</style>
-
</head>
-
-
<body>
-
<div>
-
-
</div>
-
</body>
-
-
</html>
linear 勻速
animation：動畫名稱 持續時間 運動曲線 何時開始 播放次數 是否反方向 動畫起始或者結束的狀態
animation: myfirst 5s linear 2s infinite alternate;
簡寫屬性里面不包含 animation-play-state
暫停動畫：animation-play-state: puased; 經常和鼠標經過等其他配合使用
想要動畫走回來 ，而不是直接跳回來：animation-direction ： alternate
盒子動畫結束后，停在結束位置： animation-fill-mode ： forwards
還沒聽。。
animation-timing-function：規定動畫的速度曲線，默認是“ease“
-
<!DOCTYPE html>
-
<html lang="en">
-
-
<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>
-
div {
-
overflow: hidden;
-
font-size: 20px;
-
width: 0;
-
height: 30px;
-
background-color: pink;
-
/* 讓我們的文字強制一行內顯示 */
-
white-space: nowrap;
-
/* steps 就是分幾步來完成我們的動畫 有了steps 就不要在寫 ease 或者linear 了 */
-
animation: w 4s steps(10) forwards;
-
}
-
-
@keyframes w {
-
0% {
-
width: 0;
-
}
-
100% {
-
width: 200px;
-
}
-
}
-
</style>
-
</head>
-
-
<body>
-
<div>世紀佳緣我在這里等你</div>
-
</body>
-
-
</html>
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~ 希望得到建議咨詢、商務合作，也請與我們聯系01063334945。 分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。 藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
藍藍設計的小編 http://www.syprn.cn