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

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

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

前端學(xué)習(xí)資源

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

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

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

CSS參考

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

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

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

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

排版手冊

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

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

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

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

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

Web動畫

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

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

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

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

目前，動畫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解決方案的復(fù)雜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ū)別在于它們的控制級別和復(fù)雜性。CSS過渡更簡單，用于創(chuàng)建作為狀態(tài)更改結(jié)果而發(fā)生的簡單動畫，例如將鼠標(biāo)懸停在元素上。另一方面，CSS動畫提供了更多控制和復(fù)雜性。它們允許您創(chuàng)建更復(fù)雜的動畫，具有多個步驟和階段，并且它們可以獨立于任何用戶交互運行。

如何開始學(xué)習(xí)CSS動畫？

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

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

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

CSS動畫是否資源密集型？

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

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

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

如何使我的CSS動畫具有響應(yīng)性？

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

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

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

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

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

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

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

使用CSS動畫有什么限制？

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

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