平滑升級！一文掌握CSS過渡與動畫屬性，讓你的網頁動起來！

這里是云端源想IT，幫你輕松學IT”

嗨~ 今天的你過得還好嗎？

找一顆屬于你自己的星星吧

它會給你指引方向

一直到天明

- 2024.04.12 -

在網頁設計中，動畫效果是吸引用戶眼球的重要手段。CSS動畫中的過渡屬性（transition）和動畫（animation）屬性，就像是設計師手中的魔法棒，可以讓元素在頁面上動起來，增加視覺吸引力，提升用戶體驗。

今天，我們就來揭秘這兩個神奇的屬性，看看它們是如何讓網頁變得生動活潑的。

一、過渡屬性（transition）

過渡屬性是CSS中的一種基本動畫效果，它可以讓元素的某個屬性在一定的時間內平滑地從一個值變化到另一個值。這種變化可以是顏色、大小、位置等任何可以改變的屬性。

屬性值

1、transition-property：指定要執行過渡的屬性

多個屬性間使用,隔開；
如果所有屬性都需要過渡，則使用all關鍵字；
大部分屬性都支持過渡效果；
注意過渡時必須是從一個有效數值向另外一個有效數值進行過渡；

2、transition-duration：指定過渡效果的持續時間

時間單位：s 和 ms（1s=1000ms）

3、transition-delay：過渡效果的延遲，等待一段時間后在執行過渡

4、transition-timing-function：過渡的時序函數

linear勻速運動

transition-timing-function: linear;

ease 默認值，慢速開始，先加速后減速

transition-timing-function: ease;

ease-in 加速運動

transition-timing-function: ease-in;

ease-out 減速運動

transition-timing-function: ease-out;

ease-in-out 先加速后減速

transition-timing-function: ease-in-out;

cubic-bezier()來指定時序函數

transition-timing-function: cubic-bezier(0.17, 1.79, 0.68, -0.69);

steps()分步執行過渡效果，可以設置第二個值：

end，在時間結束時執行過渡（默認值）；start，在時間開始時執行過渡

/* transition-timing-function: steps(2, end); */
transition-timing-function: steps(2);

transition-timing-function: steps(2, start);

5、transition：可以同時設置過渡相關的所有屬性

只有一個要求，如果要寫延遲，則兩個時間中第一個是持續時間，第二個是延遲時間。

示例：

/* transition: margin-left 2s 1s; */
transition-property: margin-left;
transition-duration: 2s;
transition-delay: 1s;

CSS中的animation屬性是一個功能強大的工具，它允許開發者通過純CSS的方式創建豐富的動畫效果，從而增強網頁的交互性和視覺吸引力。

二、動畫（animation）屬性

動畫（animation）是CSS中的另一種屬性，它比過渡更強大，可以創建更復雜的動畫效果。動畫允許我們定義關鍵幀，然后在這些關鍵幀之間創建平滑的過渡。

這意味著，我們可以讓元素在一段時間內完成一系列的樣式變化，從而創建出更豐富、更生動的動畫效果。

設置動畫效果，必須先要設置一個關鍵幀，關鍵幀設置了動畫執行每一個步驟

@keyframes test {
from {
margin-left: 0;
}

to {
margin-left: 900px;
}
}

屬性值：

1、animation-name：此屬性指定要綁定到選擇器的關鍵幀名稱。關鍵幀是定義動畫序列的地方，通過@keyframes規則創建。

2、animation-duration：定義動畫完成一個周期所需的時間長度，可以設置成秒(s)或毫秒(ms)。必須明確指定該屬性，因為默認值是0，如果設置為0，則動畫不會播放。

3、animation-timing-function：指定動畫如何完成一個周期的時間曲線，例如線性、緩動等。這決定了動畫的速度在整個周期內是如何變化的。

4、animation-delay：設定動畫在開始前延遲的時間，同樣可設置單位為秒或毫秒。可以用來延遲動畫的開始時間。

5、animation-iteration-count：確定動畫循環播放的次數，可以是特定的數字或者infinite表示無限循環。

infinite 無限執行

6、animation-direction：規定動畫在每次循環時是否反向播放，常用的值有normal（正常）和alternate（交替）。

normal 從from向to運行，每次都是這樣，默認值
reverse 從to向from運行，每次都是這樣
alternate 從from向to運行，重復執行動畫時反向執行
alternate-reverse 從to向from運行，重復執行動畫時反向執行

想要快速入門前端開發嗎？推薦一個前端開發基礎課程，這個老師講的特別好，零基礎學習無壓力，知識點結合代碼，邊學邊練，可以免費試看試學，還有各種輔助工具和資料，非常適合新手！點這里前往學習哦！云端源想

7、animation-fill-mode：定義動畫在開始前和結束后的狀態，比如可見或隱藏。

none 動畫執行完畢，元素回到原來位置，默認值
forwards 動畫執行完畢，元素會停止在動畫結束的位置
backwards 動畫延時等待時，元素就會處于開始位置
both 結合了forwards和backwards

8、animation-play-state：控制動畫是否正在運行或暫停，常見的值有running（運行）和paused（暫停）。

此外，在使用animation屬性時，至少需要指定兩個屬性：動畫的名稱和動畫的持續時間。其他屬性可以根據需要選擇性地設置，以達到預期的動畫效果。

示例

/* animation-name: test;
animation-duration: 2s;
animation-delay: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: both; */

animation: test 2s 2s linear infinite alternate both;

總結來說，CSS的animation屬性提供了一種在不使用JavaScript的情況下，通過純CSS實現網頁元素動畫的方式。它能夠使元素從一種樣式平滑過渡到另一種樣式，增強用戶的視覺體驗。

通過這篇文章，我們了解了CSS動畫中的過渡屬性和動畫屬性的基本概念和應用。它們可以幫助我們創建出各種吸引人的動畫效果，讓我們的網頁更加生動有趣。

記住，好的動畫效果應該是恰到好處的，過多的動畫可能會讓用戶感到困擾。所以，讓我們一起用好這兩個屬性，創造出更好的用戶體驗吧！

我們下期再見！

END

文案編輯|云端學長

文案配圖|云端學長

內容由：云端源想分享

用AJAX實現動態數據交互的示例代碼和心得體會

示例代碼：

```html
<!DOCTYPE html>
<html>
<head>
<title>AJAX示例</title>
<script>
function loadXMLDoc() {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("demo").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "example.php", true);
xmlhttp.send();
}
</script>
</head>
<body>
<button type="button" onclick="loadXMLDoc()">點擊加載數據</button>
<div id="demo"></div>
</body>
</html>
```

使用心得：

在開發過程中，我發現使用AJAX可以實現網頁與服務器之間的異步數據交互，提升用戶體驗和頁面性能。

1. AJAX（Asynchronous JavaScript and XML）是一種通過JavaScript和XML進行異步通信的技術。通過AJAX，可以在不刷新整個頁面的情況下，向服務器發送請求并獲取響應數據，然后使用JavaScript將數據動態更新到頁面上。

2. 在示例代碼中，我使用了XMLHttpRequest對象來創建AJAX請求。通過判斷瀏覽器是否支持`XMLHttpRequest`對象，可以創建不同版本的`XMLHttpRequest`對象。然后，使用`open()`方法指定請求的方法（GET或POST）、URL和是否異步。接著，使用`send()`方法發送請求，并設置`onreadystatechange`事件處理函數來處理服務器響應。當`readyState`為4（表示請求已完成）且`status`為200（表示請求成功）時，將服務器響應的數據更新到頁面上。

3. 在實際開發中，可以將AJAX與后端語言（如PHP）和數據庫（如MySQL）結合使用，實現動態數據的增刪改查等操作。可以通過AJAX向服務器發送請求，服務器接收到請求后，使用后端語言處理數據，并與數據庫交互，最后將處理結果返回給前端頁面。

在開發過程中遇到的問題和解決的bug：

在使用AJAX進行開發的過程中，我曾遇到過一些問題和bug。其中一次遇到的問題是跨域請求被瀏覽器攔截。由于瀏覽器的同源策略，AJAX請求默認只能向同源（協議、域名、端口號相同）的服務器發送請求，否則會被瀏覽器攔截。解決這個問題的方法是在服務器端設置響應頭，允許跨域請求。

另外，我還遇到過一些其他的問題，比如請求超時、返回數據格式錯誤等。這些問題通常可以通過設置合理的超時時間、檢查服務器端代碼等方式來解決。

總結：

使用AJAX可以實現網頁與服務器之間的異步數據交互，提升用戶體驗和頁面性能。在開發過程中，需要注意瀏覽器的同源策略，并根據實際需求選擇合適的后端語言和數據庫。在遇到問題時，可以通過查看錯誤信息、調試代碼等方式來解決。

（注：以上內容為筆記，非官方文檔）

我是永不低頭的熊，喜歡美食、健身，當然也喜歡寫代碼，每天不定時更新各類編程相關的文章，希望你在碼農這條路上不再孤單！

可視化大屏，我們都知道數據的實時性對于大屏的意義，便于快速決策、快速響應。那么可視化大屏如何實現數據的實時更新，實施通知呢，都用到了哪些技術，本文為大家一一解讀。

一、可視化大屏數據實時更新的意義

智慧園區可視化大屏數據實時更新具有以下重要意義：

即時監控：通過實時更新數據，智慧園區管理者和運營人員可以實時監控園區內各項指標和數據，及時發現異常情況并采取相應措施，確保園區運行的穩定性和安全性。
即時決策：實時更新的數據可以為管理者提供及時的決策支持。當園區發生變化或問題時，管理者可以根據實時數據做出快速決策，提高園區運營效率和管理水平。
實時通知：通過大屏數據實時更新，可以及時向園區內的員工、訪客和其他相關人員傳達重要信息和通知，確保信息的及時性和準確性。
數據分析：實時更新的數據可以用于進行實時數據分析，幫助管理者了解園區運行情況、趨勢和規律，為未來的規劃和決策提供參考依據。
提升用戶體驗：對于園區內的訪客和客戶來說，實時更新的數據可以提升他們的體驗感受，使其更加了解園區的情況和服務，提高園區的吸引力和競爭力。

智慧園區可視化大屏數據實時更新對于園區管理、運營和用戶體驗都具有重要意義，可以幫助園區實現更高效的管理和運營，提升園區的整體管理水平和服務質量。

二、數據實時更新的過程

數據實時更新的過程通常包括以下幾個步驟：

數據采集：首先，需要從各種數據源中采集數據。這些數據源可以包括傳感器、數據庫、第三方API等。數據采集可以通過各種方式實現，例如定時輪詢、訂閱/發布模式、Webhook等。
數據傳輸：采集到的數據需要通過網絡傳輸到數據處理和展示的系統中。這通常涉及數據的編碼、加密和傳輸，以確保數據的安全性和完整性。常用的傳輸協議包括HTTP、WebSocket、MQTT等。
數據處理：一旦數據到達數據處理系統，需要對數據進行處理和解析。這可能涉及數據的解析、轉換、篩選、聚合等操作，以便將數據轉換為可用于展示的格式。

數據存儲：處理后的數據可能需要存儲在數據庫或緩存中，以便后續查詢和展示。數據存儲可以采用關系型數據庫、NoSQL數據庫、內存數據庫等不同的存儲方式。
數據展示：最后，數據需要在可視化大屏上進行展示。這包括設計和實現數據展示界面，將數據以圖表、表格、地圖等形式呈現給用戶，以便用戶能夠直觀地了解數據情況。
實時更新：為實現數據的實時更新，系統需要定時或實時地從數據源中獲取最新數據，并更新到數據處理和展示系統中。這可能涉及定時任務、事件驅動等機制，以確保數據的及時更新和展示。

通過以上步驟，數據實時更新的過程可以實現數據的及時采集、傳輸、處理和展示，從而實現數據的實時更新和展示。這樣可以幫助用戶及時了解數據情況，做出快速決策，并提升用戶體驗

三、數據實施更新用到了哪些技術

數據實時更新涉及到多種技術和工具，以下是一些常用的技術和工具：

數據采集技術：

傳感器技術：通過傳感器采集環境數據，如溫度、濕度、光照等。
數據庫連接技術：通過數據庫連接工具或API獲取實時數據。
Web爬蟲技術：通過網絡爬蟲技術從網站上獲取實時數據。

數據傳輸技術：

HTTP/HTTPS：通過HTTP或HTTPS協議傳輸數據。
WebSocket：使用WebSocket協議實現實時雙向通信。
MQTT：輕量級的消息傳輸協議，適用于物聯網設備之間的通信。

數據處理技術：

數據解析和轉換：使用JSON、XML等格式對數據進行解析和轉換。
數據清洗和篩選：對數據進行清洗和篩選，去除無效數據或異常數據。
數據聚合：將多個數據源的數據聚合在一起，形成完整的數據集。

數據存儲技術：

關系型數據庫：如MySQL、PostgreSQL等用于存儲結構化數據。
NoSQL數據庫：如MongoDB、Redis等用于存儲非結構化數據或大數據量數據。
內存數據庫：如Redis、Memcached等用于快速存取數據。

數據展示技術：

可視化工具：如ECharts、Highcharts等用于將數據可視化展示。
大屏展示系統：如大屏幕顯示系統、數字看板等用于在大屏上展示實時數據。
Web前端技術：如HTML、CSS、JavaScript等用于設計和實現數據展示界面。

實時更新技術：

定時任務：使用定時任務框架如Quartz、Spring Task等定時更新數據。
事件驅動：使用消息隊列或事件驅動框架如Kafka、RabbitMQ等實現實時數據更新。
實時計算：使用流處理框架如Apache Flink、Apache Kafka Streams等實時處理數據并更新。

以上列舉的技術和工具是實現數據實時更新的常用方法，根據具體的需求和場景可以選擇合適的技朋和工具進行實施。

大象數據工場→10年經驗的可視化/數字孿生領域的老司機，專注大數據設計和前端交互部分。關注我，帶您了解最新的觀點、技術、干貨，如有需求可私信。

在線咨詢

上一篇：經過漫長的等待，HTML5標準終于敲定了
下一篇：PDF不知道怎么轉成HTML？推薦兩個快速轉換方法

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。