很棒的前端資源和CSS動畫課程

訂閱我們最新的HTML/CSS頻道通訊，點擊此處訂閱。

以下是我們最新的前端資源：

• Louis Lazaris提供的20多種免費前端學習資源
• Donovan Huchinson全新CSS動畫課程

前端學習資源

作為前端開發者，我們有責任掌握最新的技術和工具，使我們的最終產品易於使用、易於訪問，並且，為什麼不呢，美觀。

Louis Lazaris與我們分享了他為前端開發者提供的20多種免費文檔和指南的第11期列表。

這份清單令人印象深刻，其中包括關於函數式編程、ES6、漸進式Web應用、輔助功能等的資源。隨意選擇您喜歡的資源。對我來說，CSS參考和排版手冊是我立即查閱的資源。

CSS參考

CSS參考是一個視覺指南，其中CSS屬性被組織成：

• 動畫
• 背景
• 盒模型
• Flexbox
• 定位
• 過渡
• 排版

您還可以按字母順序訪問所有CSS屬性的列表。

本指南以清晰簡單的術語解釋每個屬性和可能的值，並提供出色的視覺效果來說明結果。

排版手冊

任何以實用和易於訪問的方式教授優秀Web排版原則、最佳實踐和代碼的工具都值得我推薦。在我看來，排版手冊就是這樣做的。

這是一個GitHub上的開源項目，涵蓋：

• 排版設計
• 字體
• Web樣式指南

最後一部分特別展示了相當數量的代碼示例，重點關注相對單位、垂直空間、字體大小、顏色等主題。

如果您覺得大多數關於Web排版的資源有點嚇人且充滿術語，那麼排版手冊會讓您驚喜（絕對是好的驚喜）。

Web動畫

我們已經進化到非常擅長注意到運動……觀察運動和視覺線索使我們能夠以非語言的方式理解複雜的動作和想法。

Web上的動畫可以利用同樣的效果，並且可以為用戶和用戶界面之間的對話增加額外的深度和意義。

使用CSS動畫賦予網站生命力——Donovan Hutchinson & Guy Routledge

動畫已成為Web設計和開發中的關鍵要素。用戶界面設計師教我們如何使用細微的動畫效果幫助用戶在網站上執行任務，在訪問者等待資源加載時防止厭倦，並在他們掃描Web內容時引導讀者的注意力。

目前，動畫Web內容最常見的方法是：

• CSS過渡和@keyframes動畫
• JavaScript

要了解有關Web動畫的更多信息，SitePoint Premium提供了一門全新的課程——使用CSS進行動畫製作——由動畫巨星Donovan Hutchinson主講。

本課程涵蓋有效用戶界面動畫的原則及其使用CSS過渡和@keyframes、緩動和計時函數、多個動畫、滾動動畫、瀏覽器支持和輔助功能的實現。

如果您更喜歡文章，以下只是一些我最喜歡的SitePoint文章：

• 來自CSS大師的動畫建議。這是SitePoint與Tiffany Brown進行現場問答的記錄，由Angela Molina主持
• Gabrielle Gosha關於在設計中使用動畫的4個技巧
• 理解CSS animation-fill-mode屬性，作者：Louis Lazaris
• 動畫：使用緩動來創建更智能的交互，作者：Daniel Schwarz
• 使用Web動畫API使頁面栩栩如生，作者：Dudley Storey。

使用CSS進行Web動畫仍然是我首選的方法，但在某些情況下，您需要一個強大的JavaScript庫才能完成工作。

對於需要JS解決方案的複雜Web動畫，請查看我的系列文章《超越CSS：動態DOM動畫庫》。第一部分介紹瞭如何使用Anime.js，第二部分介紹瞭如何使用KUTE.js（一個功能強大的模塊化開源動畫引擎）來動畫DOM。

敬請期待，更多內容即將推出。

如果您想在本系列中看到某個JavaScript動畫庫，請與我們聯繫！

特色圖片由Unsplash.com提供

關於CSS動畫的常見問題

CSS過渡和CSS動畫有什麼區別？

CSS過渡和CSS動畫都是用於在您的網站上創建流暢、引人入勝的動畫的強大工具。兩者之間的主要區別在於它們的控制級別和復雜性。 CSS過渡更簡單，用於創建作為狀態更改結果而發生的簡單動畫，例如將鼠標懸停在元素上。另一方面，CSS動畫提供了更多控制和復雜性。它們允許您創建更複雜的動畫，具有多個步驟和階段，並且它們可以獨立於任何用戶交互運行。

如何開始學習CSS動畫？

網上有很多資源可以幫助您開始學習CSS動畫。 Udemy、Scrimba和Codecademy等網站提供關於該主題的綜合課程。您還可以參考Mozilla開發者網絡（MDN）文檔以獲取更技術性和更詳細的指南。學習CSS動畫的關鍵在於實踐，因此請確保通過項目和練習來應用您所學到的知識。

我可以在任何網站上使用CSS動畫嗎？

是的，CSS動畫可以用於任何網站。但是，需要注意的是，並非所有瀏覽器都支持所有CSS動畫屬性。因此，始終建議檢查您使用的CSS屬性的兼容性，以確保您的動畫在所有瀏覽器中都能正常工作。

CSS動畫是否資源密集型？

如果處理不當，CSS動畫可能會佔用大量資源。但是，通過優化您的動畫並使用觸發最少重繪和重排的屬性，您可以創建流暢、高效的動畫，而不會顯著影響您網站的性能。

CSS動畫中的關鍵幀是什麼？

關鍵幀用於CSS動畫中以定義動畫的階段。它們允許您在動畫的各個點指定元素的樣式，從而創建一系列動畫效果。

如何使我的CSS動畫具有響應性？

要使您的CSS動畫具有響應性，您可以使用媒體查詢根據屏幕尺寸調整動畫屬性。這允許您創建在所有設備上看起來和運行良好的動畫，無論其屏幕尺寸如何。

我可以將CSS動畫與JavaScript結合使用嗎？

是的，您可以將CSS動畫與JavaScript結合使用以創建更複雜和交互式的動畫。 JavaScript可用於控制動畫的計時、順序和行為，從而提供更高水平的控制和交互性。

如何調試我的CSS動畫？

可以使用瀏覽器中的開發者工具來調試CSS動畫。這些工具允許您檢查動畫屬性、檢查計時並以慢動作查看動畫序列。

我可以使用CSS動畫來改善網站的用戶體驗嗎？

絕對可以！ CSS動畫可以通過增加視覺趣味性和交互性來極大地增強您網站的用戶體驗。它們可以用來引導用戶的注意力，提供反饋，並創建更具吸引力和動態性的用戶界面。

使用CSS動畫有什麼限制？

雖然CSS動畫是一個強大的工具，但它確實有一些局限性。它們可能佔用大量資源，特別是對於復雜的動畫，並且並非所有動畫屬性都受所有瀏覽器支持。此外，與使用JavaScript或其他動畫庫相比，使用CSS創建複雜的動畫可能更具挑戰性和耗時。

以上是很棒的前端資源和CSS動畫課程的詳細內容。更多資訊請關注PHP中文網其他相關文章！