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

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

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

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

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

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

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

CSS參考

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

• 動(dòng)畫
• 背景
• 盒模型
• Flexbox
• 定位
• 過渡
• 排版

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

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

排版手冊(cè)

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

這是一個(gè)GitHub上的開源項(xiàng)目，涵蓋：

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

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

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

Web動(dòng)畫

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

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

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

動(dòng)畫已成為Web設(shè)計(jì)和開發(fā)中的關(guān)鍵要素。用戶界面設(shè)計(jì)師教我們?nèi)绾问褂眉?xì)微的動(dòng)畫效果幫助用戶在網(wǎng)站上執(zhí)行任務(wù)，在訪問者等待資源加載時(shí)防止厭倦，並在他們掃描Web內(nèi)容時(shí)引導(dǎo)讀者的注意力。

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

• CSS過渡和@keyframes動(dòng)畫
• JavaScript

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

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

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

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

使用CSS進(jìn)行Web動(dòng)畫仍然是我首選的方法，但在某些情況下，您需要一個(gè)強(qiáng)大的JavaScript庫才能完成工作。

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

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

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

特色圖片由Unsplash.com提供

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

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

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

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

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

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

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

CSS動(dòng)畫是否資源密集型？

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

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

關(guān)鍵幀用於CSS動(dòng)畫中以定義動(dòng)畫的階段。它們?cè)试S您在動(dòng)畫的各個(gè)點(diǎn)指定元素的樣式，從而創(chuàng)建一系列動(dòng)畫效果。

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

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

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

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

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

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

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

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

使用CSS動(dòng)畫有什麼限制？

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

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