專注Java教育14年
全國(guó)咨詢/投訴熱線：400-8080-105
更新時(shí)間：2021-08-27 11:18:54 來(lái)源：動(dòng)力節(jié)點(diǎn) 瀏覽1361次
CSS過(guò)渡允許您平滑地更改屬性值，但它們總是需要像懸停一樣觸發(fā)。屬性更改不會(huì)立即生效。在一段時(shí)間內(nèi)，屬性會(huì)發(fā)生變化。例如，如果您將元素的顏色從白色更改為黑色，更改會(huì)立即發(fā)生。CSS更改按照可以自定義的加速度曲線以時(shí)間間隔發(fā)生。
在兩個(gè)狀態(tài)之間轉(zhuǎn)換的動(dòng)畫稱為隱式轉(zhuǎn)換，因?yàn)殚_(kāi)始狀態(tài)和最終狀態(tài)之間的狀態(tài)是由瀏覽器隱式定義的。
CSS動(dòng)畫允許HTML元素的動(dòng)畫，不像過(guò)渡只執(zhí)行 A 點(diǎn)到 B 點(diǎn)的操作，但也可以在兩者之間進(jìn)行更多的操作。動(dòng)畫包括兩個(gè)步驟，樣式表中定義的 CSS 動(dòng)畫和一組指示動(dòng)畫開(kāi)始和結(jié)束狀態(tài)的關(guān)鍵幀。
| 過(guò)渡 | 動(dòng)畫 |
|---|---|
| 過(guò)渡不能循環(huán)（您可以讓它們這樣做，但它們不是為此而設(shè)計(jì)的）。 | 動(dòng)畫在循環(huán)中沒(méi)有問(wèn)題。 |
| 轉(zhuǎn)換需要一個(gè)觸發(fā)器才能像鼠標(biāo)懸停一樣運(yùn)行。 | 動(dòng)畫剛開(kāi)始。它們不需要任何類型的外部觸發(fā)源。 |
| 轉(zhuǎn)換很容易在 JavaScript 中工作。 | 動(dòng)畫很難在 JavaScript 中工作。操作關(guān)鍵幀并為其分配新值的語(yǔ)法非常復(fù)雜。 |
| 過(guò)渡動(dòng)畫對(duì)象從一個(gè)點(diǎn)到另一個(gè)點(diǎn)。 | 動(dòng)畫允許您定義從一種狀態(tài)到另一種具有各種屬性和時(shí)間范圍的關(guān)鍵幀。 |
| 使用轉(zhuǎn)換來(lái)使用 JavaScript 操作值。 | 具有多個(gè)關(guān)鍵幀和簡(jiǎn)單循環(huán)提供了靈活性。 |
示例1：下面的示例演示了應(yīng)用懸停后更改顏色的過(guò)渡效果。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
div:hover {
background: yellow;
}
</style>
</head>
<body>
<h1>The transition Property</h1>
<p>
Hover over the div element below,
to see the transition effect:
</p>
<div></div>
</body>
</html>
輸出：
示例 2：以下示例演示使用動(dòng)畫更改顏色。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 2s;
}
@keyframes example {
0% {
background-color: red;
}
50% {
background-color: blue;
}
100% {
background-color: yellow;
}
}
</style>
</head>
<body>
<p>Animation</p>
<div></div>
</body>
</html>
輸出：
以上就是動(dòng)力節(jié)點(diǎn)小編介紹的"CSS動(dòng)畫和過(guò)渡的區(qū)別"，希望對(duì)大家有幫助，想了解更多可查看Java教程。動(dòng)力節(jié)點(diǎn)在線學(xué)習(xí)教程，針對(duì)沒(méi)有任何Java基礎(chǔ)的讀者學(xué)習(xí),讓你從入門到精通,主要介紹了一些Java基礎(chǔ)的核心知識(shí)，讓同學(xué)們更好更方便的學(xué)習(xí)和了解Java編程，感興趣的同學(xué)可以關(guān)注一下。
Java實(shí)驗(yàn)班
0基礎(chǔ) 0學(xué)費(fèi) 15天面授
Java就業(yè)班
有基礎(chǔ) 直達(dá)就業(yè)
Java夜校直播班
業(yè)余時(shí)間 高薪轉(zhuǎn)行
Java在職加薪班
工作1~3年，加薪神器
Java架構(gòu)師班
工作3~5年，晉升架構(gòu)
提交申請(qǐng)后，顧問(wèn)老師會(huì)電話與您溝通安排學(xué)習(xí)
京公網(wǎng)安備 11030102010736號(hào)