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

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

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

前端學習資源

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

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

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

CSS參考

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

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

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

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

排版手冊

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

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

• 排版設(shè)計
• 字體
• Web樣式指南

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

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

Web動畫

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

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

使用CSS動畫賦予網(wǎng)站生命力——Donovan Hutchinson & Guy Routledge

動畫已成為Web設(shè)計和開發(fā)中的關(guān)鍵要素。用戶界面設(shè)計師教我們?nèi)绾问褂眉毼⒌膭赢嬓Ч麕椭脩粼诰W(wǎng)站上執(zhí)行任務，在訪問者等待資源加載時防止厭倦，並在他們掃描Web內(nèi)容時引導讀者的注意力。

目前，動畫Web內(nèi)容最常見的方法是：

• CSS過渡和@keyframes動畫
• JavaScript

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

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

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

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

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

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

敬請期待，更多內(nèi)容即將推出。

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

特色圖片由Unsplash.com提供

關(guān)於CSS動畫的常見問題

CSS過渡和CSS動畫有什麼區(qū)別？

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

如何開始學習CSS動畫？

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

我可以在任何網(wǎng)站上使用CSS動畫嗎？

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

CSS動畫是否資源密集型？

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

CSS動畫中的關(guān)鍵幀是什麼？

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

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

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

我可以將CSS動畫與JavaScript結(jié)合使用嗎？

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

如何調(diào)試我的CSS動畫？

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

我可以使用CSS動畫來改善網(wǎng)站的用戶體驗嗎？

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

使用CSS動畫有什麼限制？

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

以上是很棒的前端資源和CSS動畫課程的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！