專注Java教育14年
全國咨詢/投訴熱線：400-8080-105
更新時間：2021-08-27 11:18:54 來源：動力節(jié)點 瀏覽1382次
CSS過渡允許您平滑地更改屬性值，但它們總是需要像懸停一樣觸發(fā)。屬性更改不會立即生效。在一段時間內，屬性會發(fā)生變化。例如，如果您將元素的顏色從白色更改為黑色，更改會立即發(fā)生。CSS更改按照可以自定義的加速度曲線以時間間隔發(fā)生。
在兩個狀態(tài)之間轉換的動畫稱為隱式轉換，因為開始狀態(tài)和最終狀態(tài)之間的狀態(tài)是由瀏覽器隱式定義的。
CSS動畫允許HTML元素的動畫，不像過渡只執(zhí)行 A 點到 B 點的操作，但也可以在兩者之間進行更多的操作。動畫包括兩個步驟，樣式表中定義的 CSS 動畫和一組指示動畫開始和結束狀態(tài)的關鍵幀。
| 過渡 | 動畫 |
|---|---|
| 過渡不能循環(huán)（您可以讓它們這樣做，但它們不是為此而設計的）。 | 動畫在循環(huán)中沒有問題。 |
| 轉換需要一個觸發(fā)器才能像鼠標懸停一樣運行。 | 動畫剛開始。它們不需要任何類型的外部觸發(fā)源。 |
| 轉換很容易在 JavaScript 中工作。 | 動畫很難在 JavaScript 中工作。操作關鍵幀并為其分配新值的語法非常復雜。 |
| 過渡動畫對象從一個點到另一個點。 | 動畫允許您定義從一種狀態(tài)到另一種具有各種屬性和時間范圍的關鍵幀。 |
| 使用轉換來使用 JavaScript 操作值。 | 具有多個關鍵幀和簡單循環(huán)提供了靈活性。 |
示例1：下面的示例演示了應用懸停后更改顏色的過渡效果。
<!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：以下示例演示使用動畫更改顏色。
<!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>
輸出：
以上就是動力節(jié)點小編介紹的"CSS動畫和過渡的區(qū)別"，希望對大家有幫助，想了解更多可查看Java教程。動力節(jié)點在線學習教程，針對沒有任何Java基礎的讀者學習,讓你從入門到精通,主要介紹了一些Java基礎的核心知識，讓同學們更好更方便的學習和了解Java編程，感興趣的同學可以關注一下。
官方微信
官方抖音
Java實驗班
Java就業(yè)班
Java夜校直播班
Java在職加薪班
Java架構師班
京公網安備 11030102010736號