很棒的前端资源和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中文网其他相关文章！