前端css动画_很棒的前端资源和CSS动画课程

前端css动画

This is the editorial from our latest HTML/CSS Channel newsletter, you can subscribe here.

这是我们最新HTML / CSS频道新闻通讯的社论，您可以在此处订阅 。

Here are our latest front-end treats:

以下是我们最新的前端服务：

• 20+ free front-end learning resources from Louis Lazaris
  Louis Lazaris提供的20多种免费前端学习资源
• A brand new course on CSS animation by Donovan Huchinson
  Donovan Huchinson撰写的有关CSS动画的全新课程

前端学习资源 (Front-end Learning Resources)

As front-end developers, it’s our job to stay abreast of the techniques and tools that make our final products easy to use, accessible and, why not, beautiful.

作为前端开发人员，我们的工作是与技术和工具并驾齐驱，使我们的最终产品易于使用，易于访问，并且为什么不美观。

Louis Lazaris shares with us the 11th installment of his list of free 20+ docs and guides for front-end developers.

Louis Lazaris与我们分享了免费的20多种面向前端开发人员的文档和指南清单的第11批。

The list is impressive and includes resources on functional programming, ES6, Progressive Web Apps, accessibility, and more. Feel free to pick your favorites. As for me, the CSS Reference and the the Typography Handbook are the ones I immediately checked out.

该列表令人印象深刻，并且包含有关功能编程，ES6，渐进式Web应用程序，可访问性等的资源。 随意选择您的收藏夹。 对我来说，我立即签出了CSS Reference和Typography Handbook 。

CSS参考 (CSS Reference)

The CSS Reference is a visual guide where CSS properties are organized into:

CSS参考是一个可视化指南，其中CSS属性被组织为：

• Animations
  动画制作
• Backgrounds
  背景资料
• Box model
  箱型
• Flexbox
  弹性盒
• Positioning
  定位
• Transitions
  转场
• Typography
  版式

You can also access a list of all CSS properties in alphabetical order.

您还可以按字母顺序访问所有CSS属性的列表。

The guide explains each property and possible values in clear and simple terms and offers great visuals to illustrate the results.

该指南以简洁明了的方式说明了每个属性和可能的​​值，并提供了很好的视觉效果来说明结果。

印刷手册 (The Typography Handbook)

Any tool that teaches principles, best practices and code for great web typography in a practical and accessible way has my vote. It seems to me that The Typography Handbook does just this.

任何以实用且易于访问的方式教授优秀网页排版的原理，最佳实践和代码的工具，我都可以投票。 在我看来，《印刷手册》就是这样做的。

This is an open source project on GitHub covering:

这是GitHub上的一个开源项目，内容包括：

• Typographic Design
  版式设计
• Fonts
  字型
• Web Style Guide
  网络风格指南

The last part in particular shows a fair amount of code samples focusing on topics such as relative units, vertical space, font size, color, etc.

最后一部分特别显示了大量代码样本，这些样本集中于诸如相对单位，垂直空间，字体大小，颜色等主题。

If you find most resources on web typography a bit intimidating and jargon-laden, The Typography Handbook will surprise you (totally in a good way).

如果您发现大多数关于Web版式的资源都令人生畏和行话，《版式手册》将使您大吃一惊(完全以一种很好的方式)。

网络动画 (Web Animation)

We’ve evolved to be really good at noticing movement. … Observing movement and visual cues enable us to understand complex actions and ideas in a nonverbal way.

我们已经发展为非常擅长注意到运动。 …观察动作和视觉提示使我们能够以非语言方式理解复杂的动作和想法。

Animation on the web can be leveraged to the same effect and can add extra depth and meaning to the conversation between our users and the User Interface.

网络上的动画可以达到相同的效果，并且可以为我们的用户与用户界面之间的对话增加深度和意义。

Bringing Websites to Life with CSS Animations — Donovan Hutchinson & Guy Routledge

CSS动画使网站栩栩如生 — Donovan Hutchinson和Guy Routledge

Animation has become a key ingredient in web design and development. User interface designers teach us how subtle animation effects help users perform tasks on a website, prevent boredom when visitors wait for a resource to load, guide readers’ attention as they scan web content.

动画已成为Web设计和开发中的关键要素。 用户界面设计师向我们讲授了微妙的动画效果如何帮助用户在网站上执行任务，如何防止访问者等待资源加载时的无聊，引导读者在扫描Web内容时的注意力。

At this time, the most common ways of animating web content are:

目前，最常用的动画网页内容的方法是：

• CSS transitions and @keyframes animation
  CSS过渡和@keyframes动画
• JavaScript
  JavaScript

To learn more about web animation, SitePoint Premium offers a brand new course — Animating with CSS — by animator rockstar Donovan Hutchinson.

要了解有关Web动画的更多信息，SitePoint Premium提供了动画师摇滚明星Donovan Hutchinson开设的全新课程-CSS动画。

The course covers the principles of effective user interface animation and their implementation using CSS transitions and @keyframes, easings and timing functions, multiple animations, animations on scroll, browser support and accessibility.

课程内容包括有效的用户界面，动画和使用CSS转换和@keyframes， 渐变效果和定时功能 ， 多个动画 ， 动画的执行上滚动 ， 浏览器的支持和便利性的原则。

If you prefer articles, below are just a few of my favorite ones from SitePoint:

如果您喜欢这些文章，以下只是一些SitePoint中我最喜欢的文章：

• Animation Advice from a CSS Master. This is the transcript of SitePoint’s live Q&A with Tiffany Brown, presented by Angela Molina

  CSS大师的动画建议 。 这是Angela Molina提出的SitePoint与Tiffany Brown的实时问答的抄本

• 4 Tips for Using Animation in Design by Gabrielle Gosha

  Gabrielle Gosha 在设计中使用动画的4个技巧

• Understanding the CSS animation-fill-mode Property by Louis Lazaris

  了解 Louis Lazaris CSS动画填充模式属性

• Animations: Using Easings to Craft Smarter Interactions by Daniel Schwarz

  动画：使用轻松技巧进行更智能的交互作者：丹尼尔·史瓦兹(Daniel Schwarz)

• Bringing Pages to Life with the Web Animations API by Dudley Storey.

  使用 Dudley Storey 的Web Animations API使页面栩栩如生。

Using CSS for web animation remains my preferred way of doing things, but there are instances when you need a robust JavaScript library to get the job done.

使用CSS进行网络动画仍然是我首选的处理方式，但是在某些情况下，您需要强大JavaScript库来完成工作。

For complex web animations requiring a JS solution, check out my series Beyond CSS: Dynamic DOM Animation Libraries. The first installment is an introduction on how to work with Anime.js and the second installment is about animating the DOM with KUTE.js, a modular and open source animation engine with lots of capabilities.

对于需要JS解决方案的复杂Web动画，请查看我的系列丛书CSS之外：动态DOM动画库 。 第一部分是关于如何使用Anime.js的介绍， 第二部分是关于使用KUTE.js动画化DOM的技术，KUTE.js是具有许多功能的模块化和开源动画引擎。

Stay tuned, more is to come.

敬请期待，还有更多。

If you have a JavaScript animation library you’d like to see in this series, get in touch!

如果您想在本系列中看到一个JavaScript动画库，请与我们联系！

Featured image courtesy of Unsplash.com

特色图片由Unsplash.com提供

翻译自: https://www.sitepoint.com/more-front-end-resources-and-css-animation-course/

前端css动画