這篇文章主要介紹CSS制作動畫常用技巧有哪些，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！
網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、小程序制作、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了文登免費建站歡迎大家使用！
transition
CSS 中有一個transition屬性，能夠監(jiān)聽某個 CSS 屬性的變化，通過屬性變化的控制，實現(xiàn)簡單的動畫效果：
transition CSS 屬性是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一個簡寫屬性。
html代碼
Document
動畫效果點擊此處查看 地址https://codepen.io/wjq990112/pen/PoqEemX
體驗完了，現(xiàn)在來具體講一下用法：
css代碼
transition: transition-property | transition-duration |
transition-timing-function | transition-delay;
這樣寫你們估計看不懂，我們一條一條來拆解：
css代碼
transition-property: background; /* 任何你需要偵聽變化的 CSS 屬性 */
transition-duration: 1s; /* 設(shè)定過渡動畫的時長 */
transition-timing-function: ease-in-out; /* 設(shè)定過渡動畫的效果 */
transition-delay: 0.2s; /* 設(shè)定觸發(fā)動畫的延遲 */
而transition屬性就是由上面的 4 條 CSS 屬性組合而成。
第一第二個屬性是必須項，用于指定偵聽需要添加過渡動畫的屬性以及指定動畫時長。
第三第四個屬性為可選項，用于設(shè)定過渡動畫的效果和延遲。
transition-timing-function的可選值詳見
https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition-timing-function
第一個屬性還有 2 個特殊值：none：不對任何屬性進(jìn)行偵聽 all：對所有屬性進(jìn)行偵聽并為其添加過渡動畫。
當(dāng)省略第三個屬性時，第二個時間項會被自動解析為動畫效果延遲。
干說還是有點難理解，舉個栗子吧：
css代碼
transition: background 1s ease-in-out 0.2s;
上面這個例子，就是前面的代碼中的一部分。
意思是偵聽background的變化，為其添加 1 秒的過渡動畫，過渡動畫的效果是慢開始慢結(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 屬性變化 為其加上動畫 */
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)class=box的標(biāo)簽的這三個屬性發(fā)生變化時，就回自動為其加上默認(rèn)或指定的動畫效果。
接下來我們就用它來做一些進(jìn)階的用法：
在實現(xiàn)動畫的過程中，可能會需要使用一種常用的方式：overflow障眼法。
用于實現(xiàn)一些類似Tab切換的效果：
html代碼
Document
切換Tab
動畫效果點擊此處查看https://codepen.io/wjq990112/pen/MWwrXWo
實現(xiàn)這個效果只需要將容器設(shè)置為overflow: hidden;，然后對容器內(nèi)的tab偵聽transform屬性，使用transform: translateX()使其在 X軸方向移動，大功告成了。
還有一些旋轉(zhuǎn)效果也可以使用transform: rotateZ();使其在瀏覽器平面上旋轉(zhuǎn)實現(xiàn)，默認(rèn)是以幾何中心為中心點進(jìn)行旋轉(zhuǎn)。
animation & keyframes
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 屬性的一個簡寫屬性形式。
先做個簡單的旋轉(zhuǎn)效果體驗一下：
html代碼
Document
動畫效果點擊此處查看https://codepen.io/wjq990112/pen/mdJXeqm
這是一個基礎(chǔ)的旋轉(zhuǎn)動畫，用到了animation和keyframes兩個常用于制作動畫的 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è)定單次過渡動畫時長 */
animation-timing-function: linear; /* 設(shè)定單次過渡動畫效果 */
animation-delay: 0s; /* 設(shè)定單次過渡動畫延遲時間 */
animation-iteration-count: infinite; /* 設(shè)定過渡動畫執(zhí)行次數(shù) infinite 表示無限循環(huán) */
animation-direction: normal; /* 設(shè)定過渡動畫方向 可對奇數(shù)偶數(shù)次動畫分別設(shè)定 */
animation-fill-mode: none; /* 設(shè)定過渡動畫的填充模式 */
animation-play-state: running; /* 設(shè)定過渡動畫運行或停止 */
相信大部分屬性都很好理解，只有兩個屬性可能會比較難理解。
animation-direction和animation-fill-mode應(yīng)該可以說是最難理解的兩個屬性了，我們再詳細(xì)講解一下：
css代碼
/*
* normal: 按照 keyframes 設(shè)定的動畫方向運行
* reverse: 按照 keyframes 設(shè)定的動畫方向的反方向運行
* alternate: 先按照 keyframes 設(shè)定的動畫方向運行 運行結(jié)束后再反方向運行
* alternate-reverse: 先按照 keyframes 設(shè)定的動畫方向的反方向運行 運行結(jié)束后再正向運行
*/
animation-direction: normal | reverse | alternate | alternate-reverse;
/*
* none: 不設(shè)定填充模式 默認(rèn)在動畫開始及結(jié)束時都停留在動畫未開始的狀態(tài)
* forwards: 動畫結(jié)束后停留在動畫的最后一幀
* backwards: 動畫開始前停留在動畫的第一幀
* both: 動畫開始前和動畫結(jié)束后分別停留在動畫的第一幀和最后一幀
*/
animation-fill-mode: none | forwards | backwards | both;
這兩個屬性可以說是最難理解的，如果想看設(shè)定之后的效果，可以轉(zhuǎn)戰(zhàn)MDN。
keyframes
這個CSS屬性，相信學(xué)過一些簡單的動畫制作的同學(xué)肯定了解，很簡單，就是關(guān)鍵幀。
為一個動畫設(shè)定關(guān)鍵幀，CSS將自動填充他的運動路徑。
css代碼
@keyframes rotate {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(359deg);
}
}上面這段代碼，就是為設(shè)定了animation屬性的div標(biāo)簽創(chuàng)建了兩個關(guān)鍵幀，一個是動畫起始位置的樣式，另一個是動畫結(jié)束位置的樣式，CSS將自動填充動畫的過程（即旋轉(zhuǎn) 359 度）。
不僅僅可以設(shè)置開始和結(jié)束的位置（0%可以使用from關(guān)鍵字代替，100%可以使用to關(guān)鍵字代替），還可以在動畫的運行過程中插入關(guān)鍵幀，例如33%，50%，66%等等，CSS會按照關(guān)鍵幀的樣式，對動畫進(jìn)行自動填充。
通常情況下，keyframes會與animation配合使用。
講完了animation和keyframes的用法，我們來看一道面試題，來自本人 2020 年某跳動實習(xí)生招聘一面：
請你使用 CSS 實現(xiàn)一個方塊來回移動，無限循環(huán)。
這個題目其實有 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制作動畫常用技巧有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
當(dāng)前標(biāo)題：CSS制作動畫常用技巧有哪些
網(wǎng)頁地址：http://weahome.cn/article/gjsegj.html
重慶分公司
重慶分公司
