溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹CSS制作動(dòng)畫常用技巧有哪些，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！
CSS 中有一個(gè)transition屬性，能夠監(jiān)聽某個(gè) CSS 屬性的變化，通過屬性變化的控制，實(shí)現(xiàn)簡(jiǎn)單的動(dòng)畫效果：
transition CSS 屬性是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一個(gè)簡(jiǎn)寫屬性。
html代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
color: #fff;
background: #000;
border-radius: 4px;
/* 使用 transition 偵聽 CSS 屬性變化 為其加上動(dòng)畫 */
transition: background 1s ease-in-out 0.2s, color 3s, width 5s;
}
.box:hover {
width: 400px;
color: #000;
background: #fff;
}
</style>
</head>
<body>
<div>
<div>鼠標(biāo)懸浮查看效果</div>
</div>
</body>
</html>動(dòng)畫效果點(diǎn)擊此處查看 地址https://codepen.io/wjq990112/pen/PoqEemX
體驗(yàn)完了，現(xiàn)在來具體講一下用法：
css代碼
transition: transition-property | transition-duration | transition-timing-function | transition-delay;
這樣寫你們估計(jì)看不懂，我們一條一條來拆解：
css代碼
transition-property: background; /* 任何你需要偵聽變化的 CSS 屬性 */ transition-duration: 1s; /* 設(shè)定過渡動(dòng)畫的時(shí)長(zhǎng) */ transition-timing-function: ease-in-out; /* 設(shè)定過渡動(dòng)畫的效果 */ transition-delay: 0.2s; /* 設(shè)定觸發(fā)動(dòng)畫的延遲 */
而transition屬性就是由上面的 4 條 CSS 屬性組合而成。
第一第二個(gè)屬性是必須項(xiàng)，用于指定偵聽需要添加過渡動(dòng)畫的屬性以及指定動(dòng)畫時(shí)長(zhǎng)。
第三第四個(gè)屬性為可選項(xiàng)，用于設(shè)定過渡動(dòng)畫的效果和延遲。
transition-timing-function的可選值詳見
https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition-timing-function
第一個(gè)屬性還有 2 個(gè)特殊值：none：不對(duì)任何屬性進(jìn)行偵聽 all：對(duì)所有屬性進(jìn)行偵聽并為其添加過渡動(dòng)畫。
當(dāng)省略第三個(gè)屬性時(shí)，第二個(gè)時(shí)間項(xiàng)會(huì)被自動(dòng)解析為動(dòng)畫效果延遲。
干說還是有點(diǎn)難理解，舉個(gè)栗子吧：
css代碼
transition: background 1s ease-in-out 0.2s;
上面這個(gè)例子，就是前面的代碼中的一部分。
意思是偵聽background的變化，為其添加 1 秒的過渡動(dòng)畫，過渡動(dòng)畫的效果是慢開始慢結(jié)束，并在屬性變化 0.2 秒后才開始執(zhí)行。
那么上面代碼中的這一段：
css代碼
.box {
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
color: #fff;
background: #000;
border-radius: 4px;
/* 使用 transition 偵聽 CSS 屬性變化 為其加上動(dòng)畫 */
transition: background 1s ease-in-out 0.2s, color 3s, width 5s;
}
.box:hover {
width: 400px;
color: #000;
background: #fff;
}代碼中的transition屬性分別為background``color``width加上了過渡動(dòng)畫，當(dāng)class=box的標(biāo)簽的這三個(gè)屬性發(fā)生變化時(shí)，就回自動(dòng)為其加上默認(rèn)或指定的動(dòng)畫效果。
接下來我們就用它來做一些進(jìn)階的用法：
在實(shí)現(xiàn)動(dòng)畫的過程中，可能會(huì)需要使用一種常用的方式：overflow障眼法。
用于實(shí)現(xiàn)一些類似Tab切換的效果：
html代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.wrapper {
width: 100px;
height: 100px;
overflow: hidden;
}
#tabs {
display: flex;
width: 200px;
height: 100px;
transition: transform 0.3s;
}
.tab-pane-1 {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
background: red;
}
.tab-pane-2 {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
background: yellow;
}
.transform {
transform: translateX(-50%);
}
</style>
</head>
<body>
<div>
<div id="tabs">
<div>1</div>
<div>2</div>
</div>
</div>
<button onclick="switchTabPane()">切換Tab</button>
<script>
function switchTabPane() {
var el = document.getElementById('tabs')
el.className = el.className ? '' : 'transform'
}
</script>
</body>
</html>動(dòng)畫效果點(diǎn)擊此處查看https://codepen.io/wjq990112/pen/MWwrXWo
實(shí)現(xiàn)這個(gè)效果只需要將容器設(shè)置為overflow: hidden;，然后對(duì)容器內(nèi)的tab偵聽transform屬性，使用transform: translateX()使其在 X軸方向移動(dòng)，大功告成了。
還有一些旋轉(zhuǎn)效果也可以使用transform: rotateZ();使其在瀏覽器平面上旋轉(zhuǎn)實(shí)現(xiàn)，默認(rèn)是以幾何中心為中心點(diǎn)進(jìn)行旋轉(zhuǎn)。
animation屬性的用法和transition比較相似，接下來由我來詳細(xì)介紹一下。
animation CSS 屬性是 animation-name，animation-duration，animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 屬性的一個(gè)簡(jiǎn)寫屬性形式。
先做個(gè)簡(jiǎn)單的旋轉(zhuǎn)效果體驗(yàn)一下：
html代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
@keyframes rotate {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(359deg);
}
}
.rotate {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
color: #fff;
background: red;
/* 為元素設(shè)定 10s 的旋轉(zhuǎn)動(dòng)畫 */
animation: rotate 10s linear infinite;
}
.wrapper {
display: flex;
width: 200px;
height: 200px;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div>
<div>旋轉(zhuǎn)</div>
</div>
</body>
</html>動(dòng)畫效果點(diǎn)擊此處查看https://codepen.io/wjq990112/pen/mdJXeqm
這是一個(gè)基礎(chǔ)的旋轉(zhuǎn)動(dòng)畫，用到了animation和keyframes兩個(gè)常用于制作動(dòng)畫的 CSS 屬性。
animation
現(xiàn)在我們來講一下基礎(chǔ)用法：
css代碼
animation: animation-name | animation-duration | animation-timing-function | animation-delay | animation-iteration-count | animation-direction | animation-fill-mode | animation-play-state;
這樣講肯定還是不懂，繼續(xù)一條一條拆解開給大家講解：
css代碼
animation-name: rotate; /* 自定義 keyframes 名 */ animation-duration: 10s; /* 設(shè)定單次過渡動(dòng)畫時(shí)長(zhǎng) */ animation-timing-function: linear; /* 設(shè)定單次過渡動(dòng)畫效果 */ animation-delay: 0s; /* 設(shè)定單次過渡動(dòng)畫延遲時(shí)間 */ animation-iteration-count: infinite; /* 設(shè)定過渡動(dòng)畫執(zhí)行次數(shù) infinite 表示無限循環(huán) */ animation-direction: normal; /* 設(shè)定過渡動(dòng)畫方向 可對(duì)奇數(shù)偶數(shù)次動(dòng)畫分別設(shè)定 */ animation-fill-mode: none; /* 設(shè)定過渡動(dòng)畫的填充模式 */ animation-play-state: running; /* 設(shè)定過渡動(dòng)畫運(yùn)行或停止 */
相信大部分屬性都很好理解，只有兩個(gè)屬性可能會(huì)比較難理解。
animation-direction和animation-fill-mode應(yīng)該可以說是最難理解的兩個(gè)屬性了，我們?cè)僭敿?xì)講解一下：
css代碼
/* * normal: 按照 keyframes 設(shè)定的動(dòng)畫方向運(yùn)行 * reverse: 按照 keyframes 設(shè)定的動(dòng)畫方向的反方向運(yùn)行 * alternate: 先按照 keyframes 設(shè)定的動(dòng)畫方向運(yùn)行 運(yùn)行結(jié)束后再反方向運(yùn)行 * alternate-reverse: 先按照 keyframes 設(shè)定的動(dòng)畫方向的反方向運(yùn)行 運(yùn)行結(jié)束后再正向運(yùn)行 */ animation-direction: normal | reverse | alternate | alternate-reverse; /* * none: 不設(shè)定填充模式 默認(rèn)在動(dòng)畫開始及結(jié)束時(shí)都停留在動(dòng)畫未開始的狀態(tài) * forwards: 動(dòng)畫結(jié)束后停留在動(dòng)畫的最后一幀 * backwards: 動(dòng)畫開始前停留在動(dòng)畫的第一幀 * both: 動(dòng)畫開始前和動(dòng)畫結(jié)束后分別停留在動(dòng)畫的第一幀和最后一幀 */ animation-fill-mode: none | forwards | backwards | both;
這兩個(gè)屬性可以說是最難理解的，如果想看設(shè)定之后的效果，可以轉(zhuǎn)戰(zhàn)MDN。
keyframes
這個(gè)CSS屬性，相信學(xué)過一些簡(jiǎn)單的動(dòng)畫制作的同學(xué)肯定了解，很簡(jiǎn)單，就是關(guān)鍵幀。
為一個(gè)動(dòng)畫設(shè)定關(guān)鍵幀，CSS將自動(dòng)填充他的運(yùn)動(dòng)路徑。
css代碼
@keyframes rotate {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(359deg);
}
}上面這段代碼，就是為設(shè)定了animation屬性的div標(biāo)簽創(chuàng)建了兩個(gè)關(guān)鍵幀，一個(gè)是動(dòng)畫起始位置的樣式，另一個(gè)是動(dòng)畫結(jié)束位置的樣式，CSS將自動(dòng)填充動(dòng)畫的過程（即旋轉(zhuǎn) 359 度）。
不僅僅可以設(shè)置開始和結(jié)束的位置（0%可以使用from關(guān)鍵字代替，100%可以使用to關(guān)鍵字代替），還可以在動(dòng)畫的運(yùn)行過程中插入關(guān)鍵幀，例如33%，50%，66%等等，CSS會(huì)按照關(guān)鍵幀的樣式，對(duì)動(dòng)畫進(jìn)行自動(dòng)填充。
通常情況下，keyframes會(huì)與animation配合使用。
講完了animation和keyframes的用法，我們來看一道面試題，來自本人 2020 年某跳動(dòng)實(shí)習(xí)生招聘一面：
請(qǐng)你使用 CSS 實(shí)現(xiàn)一個(gè)方塊來回移動(dòng)，無限循環(huán)。
這個(gè)題目其實(shí)有 2 種做法，但是原理都是一樣的，這里就不放 HTML 代碼了，直接放 CSS 的部分：
/*
* ①
*/
@keyframes move {
0% {
transform: translateX(0);
}
50% {
transform: translateX(200px);
}
100% {
transform: translateX(0);
}
}
.move {
width: 100px;
height: 50px;
background: yellow;
animation: move 1s linear infinite;
}
/*
* ②
*/
@keyframes move {
0% {
transform: translateX(0);
}
100% {
transform: translateX(200px);
}
}
.move {
width: 100px;
height: 50px;
background: yellow;
animation: move 0.5s linear infinite alternate;
}以上是“CSS制作動(dòng)畫常用技巧有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼