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