導(dǎo)讀1.CSS動(dòng)畫(huà)有哪些?transition過(guò)渡與animation動(dòng)畫(huà)的區(qū)別是什么？1.transition過(guò)渡2.transform變形3.animati....1. CSS 動(dòng)畫(huà)有哪些? transition過(guò)渡與animation動(dòng)畫(huà)的區(qū)別是什么？

1. transition 過(guò)渡2. transform 變形3. animation 關(guān)鍵幀動(dòng)畫(huà)

2. 首先介紹各個(gè)動(dòng)畫(huà)的語(yǔ)法 屬性2.1 transition 過(guò)渡

1. 語(yǔ)法: 1. transition: property duration timing-function delay 1. transition: 屬性是個(gè)復(fù)合屬性 2. transition-property: 規(guī)定設(shè)置過(guò)渡效果的 css 屬性名稱 3. transition-duration: 規(guī)定完成過(guò)渡效果需要多少秒或毫秒 4. transition-timing-function: 指定過(guò)渡函數(shù), 規(guī)定速度效果的速度曲線 5. transition-delay: 指定開(kāi)始出現(xiàn)的延遲時(shí)間2. 默認(rèn)值分別為: all 0 ease 0; 1. 注: transition-duration 時(shí)長(zhǎng)為 0, 不會(huì)產(chǎn)生過(guò)渡效果3. 改變多個(gè) css 屬性的過(guò)渡效果時(shí), 代碼示例: 1. a { transition: background 0.8s ease-in 0.3s, color 0.6s ease-out 0.3s; }4. 子屬性: 1. transition-property 1. transition-property: none |all |property; 1. 值為 none 時(shí), 沒(méi)有屬性會(huì)獲得過(guò)渡效果 2. 值為 all 時(shí), 所有屬性都將獲得過(guò)渡效果 3. 值為指定的 css 屬性應(yīng)用過(guò)渡效果, 多個(gè)屬性用逗號(hào)隔開(kāi) 2. color : background-color, border-color, color, outline-color ; 3. length : 真實(shí)的數(shù)字 如：word-spacing,width,vertical-align,top,right,bottom,left,padding,outline-width,margin,min-width,min-height,max-width,max-height,line-height,height,border-width,border-spacing, 4. integer : 離散步驟（整個(gè)數(shù)字）, 在真實(shí)的數(shù)字空間, 以及使用 floor()轉(zhuǎn)換為整數(shù)時(shí)發(fā)生 如: outline-offset,z-index 5. number : 真實(shí)的（浮點(diǎn)型）數(shù)值, 如:zoom,opacity,font-weight 6. rectangle : 通過(guò)x, y, width 和 height（轉(zhuǎn)為數(shù)值）變換，如: crop 7. visibility : 離散步驟，在0到1數(shù)字范圍之內(nèi)，0表示“隱藏”，1表示完全“顯示”,如：visibility 8. shadow : 作用于color, x, y 和 blur（模糊）屬性,如：text-shadow 9. background-image : 通過(guò)每次停止時(shí)的位置和顏色進(jìn)行變化。它們必須有相同的類型（放射狀的或是線性的）和相同的停止數(shù)值以便執(zhí)行動(dòng)畫(huà)。 2. transition-duration 1. transition-duration: time; 1. 該屬性主要用來(lái)設(shè)置一個(gè)屬性過(guò)渡到另一個(gè)屬性所需的時(shí)間, 也就是從舊屬性過(guò)渡到新屬性花費(fèi)的時(shí)間長(zhǎng)度, 俗稱持續(xù)時(shí)間 3. transition-timing-function 1. transition-timing-function: linear| ease| ease-in| ease-out| ease-in-out| cubic-bezier(n,n,n,n); 1. 該屬性指的是過(guò)渡的 “緩動(dòng)函數(shù)” 。 主要用來(lái)指定瀏覽器的過(guò)渡速度, 以及過(guò)渡期間的操作進(jìn)展情況, 解釋下: 2. 注意: 值 cubic-bezier(n,n,n,n) 可以定義自己的值, 如 cubic-bezier(0.42,0,0.58,1) 4. transition-delay 1. 這個(gè)屬性沒(méi)什么說(shuō)的了, 就是過(guò)渡效果開(kāi)始前的延遲時(shí)間, 單位秒或者毫秒

2.2 transform 變形

1. 可以利用 transform 功能來(lái)實(shí)現(xiàn)文字或圖像的 旋轉(zhuǎn)、縮放、傾斜、移動(dòng) 這四種類型的變形處理 1. 旋轉(zhuǎn) rotate 1. 用法: transform: rotate(45deg); 2. 共一個(gè)參數(shù) “角度”, 單位 deg 為度的意思, 正數(shù)為順時(shí)針旋轉(zhuǎn), 負(fù)數(shù)為逆時(shí)針旋轉(zhuǎn), 上述代碼作用是順時(shí)針旋轉(zhuǎn)45度 2. 縮放 scale 1. 用法: transform: scale(0.5) 或者 transform: scale(0.5, 2); 2. 一個(gè)參數(shù)時(shí): 表示水平和垂直同時(shí)縮放該倍率 3. 兩個(gè)參數(shù)時(shí): 第一個(gè)參數(shù)指定水平方向的縮放倍率, 第二個(gè)參數(shù)指定垂直方向的縮放倍率 。 3. 傾斜 skew 1. 用法: transform: skew(30deg) 或者 transform: skew(30deg, 30deg); 2. 一個(gè)參數(shù)時(shí): 表示水平方向的傾斜角度 。 3. 兩個(gè)參數(shù)時(shí): 第一個(gè)參數(shù)表示水平方向的傾斜角度, 第二個(gè)參數(shù)表示垂直方向的傾斜角度 。 4. skew 的默認(rèn)原點(diǎn) transform-origin 是這個(gè)物件的中心點(diǎn) 4. 移動(dòng) translate 1. 用法: transform: translate(45px) 或者 transform: translate(45px, 150px); 2. 一個(gè)參數(shù)時(shí): 表示水平方向的移動(dòng)距離; 3. 兩個(gè)參數(shù)時(shí): 第一個(gè)參數(shù)表示水平方向的移動(dòng)距離, 第二個(gè)參數(shù)表示垂直方向的移動(dòng)距離 。2. 基準(zhǔn)點(diǎn) transform-origin 1. 在使用 transform 方法進(jìn)行文字或圖像的變形時(shí), 是以元素的中心點(diǎn)為基準(zhǔn)點(diǎn)進(jìn)行的 。 使用 transform-origin 屬性, 可以改變變形的基準(zhǔn)點(diǎn) 。 2. 用法: transform-origin: 10px 10px; 3. 表示相對(duì)左上角原點(diǎn)的距離, 單位 px, 第一個(gè)參數(shù)表示相對(duì)左上角原點(diǎn)水平方向的距離, 第二個(gè)參數(shù)表示相對(duì)左上角原點(diǎn)垂直方向的距離; 4. 兩個(gè)參數(shù)除了可以設(shè)置為具體的像素值, 其中第一個(gè)參數(shù)可以指定為 left、center、right, 第二個(gè)參數(shù)可以指定為 top、center、bottom。3. 多方法組合變形 1. 用法: transform: rotate(45deg) scale(0.5) skew(30deg, 30deg) translate(100px, 100px); 2. 這四種變形方法順序可以隨意, 但不同的順序?qū)е伦冃谓Y(jié)果不同, 原因是變形的順序是從左到右依次進(jìn)行

2.3 animation 關(guān)鍵幀動(dòng)畫(huà)

1. 在 CSS3 中創(chuàng)建動(dòng)畫(huà), 您需要學(xué)習(xí) @keyframes 規(guī)則 。2. @keyframes 規(guī)則用于創(chuàng)建動(dòng)畫(huà) 。 在 @keyframes 中規(guī)定某項(xiàng) CSS 樣式, 就能創(chuàng)建由當(dāng)前樣式逐漸改為新樣式的動(dòng)畫(huà)效果 。3. 必須定義動(dòng)畫(huà)的名稱和時(shí)長(zhǎng) 。 如果忽略時(shí)長(zhǎng), 則動(dòng)畫(huà)不會(huì)允許, 因?yàn)槟J(rèn)值是 0。4. 請(qǐng)用百分比來(lái)規(guī)定變化發(fā)生的時(shí)間, 或用關(guān)鍵詞 "from" 和 "to", 等同于 0% 和 100% 。5. 語(yǔ)法 1. animation: name duration timing-function delay iteration-count direction; 1. animation-name 規(guī)定需要綁定到選擇器的 keyframe 名稱 2. animation-duration 規(guī)定動(dòng)畫(huà)完成一個(gè)周期所花費(fèi)的秒或毫秒。默認(rèn)是 0。 3. animation-timing-function 規(guī)定動(dòng)畫(huà)的速度曲線。 默認(rèn)是 "ease"。 4. animation-delay 規(guī)定動(dòng)畫(huà)何時(shí)開(kāi)始 。 默認(rèn)是 0。 5. animation-iteration-count 規(guī)定動(dòng)畫(huà)被播放的次數(shù) 。 默認(rèn)是 1。 6. animation-direction 規(guī)定動(dòng)畫(huà)是否在下一周期逆向地播放 。 默認(rèn)是 "normal"; alternate (輪流),。 1. alternate (輪流): 動(dòng)畫(huà)播放在第偶數(shù)次向前播放, 第奇數(shù)次向反方向播放 (animation-iteration-count 取值大于1時(shí)設(shè)置有效 2. 語(yǔ)法: animation-direction: alternate; 2. animation-play-state 規(guī)定動(dòng)畫(huà)是否正在運(yùn)行或暫停 。 默認(rèn)是 "running" 播放; paused 暫停播放 。 1. 語(yǔ)法: animation-play-state: paused; 3. animation-fill-mode 屬性規(guī)定動(dòng)畫(huà)在播放之前或之后, 其動(dòng)畫(huà)效果是否可見(jiàn); 規(guī)定對(duì)象動(dòng)畫(huà)時(shí)間之外的狀態(tài); none | forwards | backwards | both 。 1. none: 不改變默認(rèn)行為 (默認(rèn), 回到動(dòng)畫(huà)沒(méi)開(kāi)始時(shí)的狀態(tài)) 。 2. forwards: 當(dāng)動(dòng)畫(huà)完成后，保持最后一個(gè)屬性值（在最后一個(gè)關(guān)鍵幀中定義) (動(dòng)畫(huà)結(jié)束后動(dòng)畫(huà)停留在結(jié)束狀態(tài)) 。 3. backwards: 在 animation-delay 所指定的一段時(shí)間內(nèi), 在動(dòng)畫(huà)顯示之前, 應(yīng)用開(kāi)始屬性值 (在第一個(gè)關(guān)鍵幀中定義) （動(dòng)畫(huà)回到第一幀的狀態(tài)）。 4. both: 向前和向后填充模式都被應(yīng)用 （根據(jù) animation-direction 輪流應(yīng)用 forwards 和 backwords 規(guī)則）。 5. 語(yǔ)法: animation-fill-mode: forwards 1. 0% 是動(dòng)畫(huà)的開(kāi)始, 100% 是動(dòng)畫(huà)的完成。

3. 接下來(lái)是常見(jiàn)的面試題目以及實(shí)現(xiàn)代碼3.1 transition 示例一

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS 動(dòng)畫(huà)- transition </title></head><style>* { padding: 0; margin: 0;}/* CSS實(shí)現(xiàn)示例 */.w_tran-css { width: 350px; height: 350px; background: url(./images/1-2-https原理.jpg) no-repeat center; transition: all 1s ease-in-out; background-size: 110%; border: 5px solid slateblue;}.w_tran-css:hover { background-size: 120%; border: 5px solid skyblue;}</style><body> <div > <p>transition 動(dòng)畫(huà) --- 測(cè)試背景圖中的動(dòng)畫(huà)效果</p> </div></body></html>

展示效果如圖所示:

3.2 transition 示例二

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS 動(dòng)畫(huà) - transition</title></head><style>* { margin: 0;}.w_outer { display: flex; justify-content: center; background-color: skyblue; height: 100vh;}nav { display: flex; width: 80%; height: 40px; gap: 40px;}a { flex: 1; background-color: #333; color: #fff; border: 1px solid; padding: 8px; text-align: center; text-decoration: none; transition: all 0.5s ease-out;}a:hover, a:focus { background-color: steelblue; color: #333;}</style><body> <div > <nav> <a href="#">Home</a> <a href="#">About</a> <a href="#">Contact Us</a> <a href="#">Links</a> </nav> </div></body></html>

展示效果如圖所示:

3.3 transform 示例一

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS 動(dòng)畫(huà) - transform</title></head><style>* { padding: 0; margin: 0;}/* 簡(jiǎn)單示例-1 */.w_outer { width: 300px; border: 120px solid red;}#btn { display: inline-block; width: 300px; height: 300px; border: 1px solid blue; position: relative; cursor: pointer;}.ball { border-radius: 25px; width: 50px; height: 50px; background: rgb(17, 8, 8); position: absolute; top: 0; left: 0; transition: transform 1s;}/* 簡(jiǎn)單示例-1 */.w_img { width: 300px; /* transform 設(shè)置動(dòng)畫(huà)時(shí), 需要配合 transition 來(lái)設(shè)置過(guò)渡時(shí)間*/ transition: 1s;}.w_img:hover { transform: rotate(90deg); transform-origin: 0, 0 ;}/* 簡(jiǎn)單示例-3 */.w_trans-3 { border: solid red; transform: translate(30px, 20px) rotate(20deg); width: 140px; height: 60px;}</style><body> <!-- 示例一 --> <div > <div id="btn"> <p>transform --- 動(dòng)畫(huà) Click anywhere to move the ball</p> <div id="foo" ></div> </div> </div> <!-- 示例二 --> <img src="./images/1-https-注釋.png" alt=""> <!-- 示例三 --> <div >transform - 設(shè)置變形</div></body><script>var f = document.getElementById(foo);var far = document.getElementById(btn)far.onclick = function(ev, obj){ f.style.transform = translateY( (ev.clientY - 25 - this.offsetLeft) px); f.style.transform = translateX( (ev.clientX - 25 - this.offsetTop) px);};</script></html>

展示效果如圖所示:

3.4 transform 示例二

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS 動(dòng)畫(huà) - transform -- 經(jīng)典旋轉(zhuǎn)正方體</title></head><style> ul{ position: relative; height: 500px; width: 500px; list-style: none; margin: 100px auto; transform-style: preserve-3d; animation: ani 4s linear 0s infinite; } li{ position:absolute; height: 500px; width: 500px; font-size: 32px; text-align: center; line-height: 500px; backface-visibility: hidden; } .w_noodle-1 { background-color: green; transform: translateZ(250px); } .w_noodle-2 { background-color: yellow; transform: rotateY(90deg) translateZ(250px); } .w_noodle-3 { background-color: orange; transform: rotateX(90deg) translateZ(250px); } .w_noodle-4 { background-color: red; transform: rotateX(-90deg) translateZ(250px); } .w_noodle-5 { background-color:blue; transform: rotateY(-90deg) translateZ(250px); } .w_noodle-6 { background-color:purple; transform: rotateX(180deg) translateZ(250px); } @keyframes ani{ 100%{ transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg); } }</style><body><ul> <li >1</li> <li >2</li> <li >3</li> <li >4</li> <li >5</li> <li >6</li></ul></body></html>

展示效果如圖所示:

3.4 A transform 示例三

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS 動(dòng)畫(huà) - transform -- 時(shí)鐘</title></head><style id="css">li{ list-style: none;}#w_outer{ width: 400px; height: 400px; position: absolute; top:calc(50% - 200px); left:calc(50% - 200px); border: 2px solid palegoldenrod;}#w_cont{ width: 200px; height: 200px; position: absolute; top:calc(50% - 100px); left:calc(50% - 100px); border: 2px solid cyan; border-radius: 50%;}.w_h-item{ width: 4px; height: 12px; position: absolute; top: 0; left: calc(50% - 2px); background-color: gray; transform-origin: 2px 100px;}.angle30{transform : rotate(30deg);}.angle60{transform : rotate(60deg);}.angle90{transform : rotate(90deg);}.angle120{transform : rotate(120deg);}.angle150{transform : rotate(150deg);}.angle180{transform : rotate(180deg);}.angle210{transform : rotate(210deg);}.angle240{transform : rotate(240deg);}.angle270{transform : rotate(270deg);}.angle300{transform : rotate(300deg);}.angle330{transform : rotate(330deg);}#fixPoint{ width: 10px; height: 10px; position: absolute; top:calc(50% - 5px); left:calc(50% - 5px); background-color: cadetblue; border-radius: 50%;}#hour{ width: 6px; height: 70px; position:absolute; top: 40px; left: calc(50% - 3px); background-color: darkblue; transform-origin: 50% 60px;}#minute{ width: 4px; height: 75px; position:absolute; top: 35px; left: calc(50% - 2px); background-color: yellow; transform-origin: 50% 65px;}#second{ width: 2px; height: 90px; position:absolute; top: 20px; left: calc(50% - 1px); background-color: red; transform-origin: 50% 80px;}</style><body><div id = "w_outer"> <div id = w_cont> <ul id = "w_hour-line"> <li class = "w_h-item"></li> <li class = "w_h-item angle30"></li> <li class = "w_h-item angle60"></li> <li class = "w_h-item angle90"></li> <li class = "w_h-item angle120"></li> <li class = "w_h-item angle150"></li> <li class = "w_h-item angle180"></li> <li class = "w_h-item angle210"></li> <li class = "w_h-item angle240"></li> <li class = "w_h-item angle270"></li> <li class = "w_h-item angle300"></li> <li class = "w_h-item angle330"></li> </ul> <div id = "fixPoint"></div> <!-- 時(shí)針 --> <div id = "hour" ></div> <!-- 分針 --> <div id = "minute" ></div> <!-- 秒針 --> <div id = "second" ></div> </div></div></div></body><script>window.onload = function(){ var hourHand = document.getElementById(hour); var minuteHand = document.getElementById(minute); var secondHand = document.getElementById(second); // 初始化(細(xì)節(jié)知識(shí)點(diǎn): 如果這里不執(zhí)行初始化, 在頁(yè)面顯示的內(nèi)容會(huì)有一個(gè)閃屏的問(wèn)題: 分針、時(shí)針、秒針，重疊在12點(diǎn)這個(gè)位置) initTime() // 執(zhí)行定時(shí)器 setInterval(initTime, 1000) function initTime() { var nowTime = new Date(); // 求取時(shí)針角度(這里 -12 在顯示上是正確的) var hourVal = nowTime.getHours() - 12; var hourDeg = hourVal / 12 * 360 deg; // 求取分針角度 var minuteVal = nowTime.getMinutes(); var minuteDeg = minuteVal / 60 * 360 deg; // 求取秒針角度 var secondVal = nowTime.getSeconds(); var seconDeg = secondVal / 60 * 360 deg; // 原生方法: 利用 DOM 元素的 style 屬性設(shè)置 hourHand.style.transform = rotate( hourDeg ); minuteHand.style.transform = rotate( minuteDeg ); secondHand.style.transform = rotate( seconDeg ); }}</script></html>

展示效果如圖所示:

3.6 animation 示例一

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS 動(dòng)畫(huà) -- animation 關(guān)鍵幀動(dòng)畫(huà)</title></head><style> p { width:300px; height:300px; background:red; animation:myfirst 3s infinite alternate; /* //Firefox */ -moz-animation:myfirst 3s infinite alternate; /* // Safari and Chrome */ -webkit-animation:myfirst 3s infinite alternate; /* // Opera */ -o-animation:myfirst 3s infinite alternate; } @keyframes myfirst { from {background:red;} to {background:yellow;} } /* // Firefox */ @-moz-keyframes myfirst { from {background:red;} to {background:yellow;} } /* // Safari and Chrome */ @-webkit-keyframes myfirst { from {background:red;} to {background:yellow;} } /* // Opera */ @-o-keyframes myfirst { from {background:red;} to {background:yellow;} }</style><body> <p>無(wú)限循環(huán)播放動(dòng)畫(huà)效果</p></body></html>

展示效果如圖所示:

3.7 animation 示例二

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS 動(dòng)畫(huà) -- animation 關(guān)鍵幀動(dòng)畫(huà)</title></head><style>p { background-color: skyblue; font: 96px "Microsoft Yahei"; font-weight: 500; text-align: center; color: #f35626; cursor: pointer;}p:hover { animation:rubberBand 1.5s;}@-webkit-keyframes rubberBand{ 0%{ -webkit-transform:scale(1); transform:scale(1) } 30%{ -webkit-transform:scaleX(1.25) scaleY(0.75); transform:scaleX(1.25) scaleY(0.75) } 40%{ -webkit-transform:scaleX(0.75) scaleY(1.25); transform:scaleX(0.75) scaleY(1.25) } 60%{ -webkit-transform:scaleX(1.15) scaleY(0.85); transform:scaleX(1.15) scaleY(0.85) } 100%{ -webkit-transform:scale(1); transform:scale(1) }}@keyframes rubberBand{ 0%{ -webkit-transform:scale(1); -ms-transform:scale(1); transform:scale(1) } 30%{ -webkit-transform:scaleX(1.25) scaleY(0.75); -ms-transform:scaleX(1.25) scaleY(0.75); transform:scaleX(1.25) scaleY(0.75) } 40%{ -webkit-transform:scaleX(0.75) scaleY(1.25); -ms-transform:scaleX(0.75) scaleY(1.25); transform:scaleX(0.75) scaleY(1.25) } 60%{ -webkit-transform:scaleX(1.15) scaleY(0.85); -ms-transform:scaleX(1.15) scaleY(0.85); transform:scaleX(1.15) scaleY(0.85) } 100%{ -webkit-transform:scale(1); -ms-transform:scale(1); transform:scale(1) }}</style><body><div> <p>Animate.css</p></div></body><script></script></html>

展示效果如圖所示:

之前有整理過(guò)部分知識(shí)點(diǎn), 現(xiàn)在將整理的相關(guān)內(nèi)容, 驗(yàn)證之后慢慢分享給大家; 這個(gè)專題是 "前端面試題" 的相關(guān)專欄; 大概會(huì)有200 的文章。

如果對(duì)大家有所幫助，可以點(diǎn)個(gè)關(guān)注、點(diǎn)個(gè)贊; 文章會(huì)持續(xù)打磨 。

有什么想要了解的前端知識(shí), 可以在評(píng)論區(qū)留言, 會(huì)及時(shí)分享所相關(guān)內(nèi)容 。