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