我相信很多前端开发人员都有基于CSS @keyframes创建动画的经历。甚至其中有很多人创建了一些很复杂的动效和去实验这个特性。如果你想要全面了解这篇文章将要介绍的内容，建议你花点时间阅读我2011年在Smashing Magazine介绍的一个主题，这篇文章也是非常不错的。不过，在今天这篇文章中，我并不想介绍有关于CSS动画中所有的属性，我只想专注于CSS动画中的一个属性：animation-fill-mode属性。这个动画属性对动画影响并不很明显。例如没有人会对CSS动画中animation-name、animation-duration等属性感到困惑。但对于animation-fill-mode呢？我们接下来通过一些简单的示例来阐述。

既然你已经学会了所以的新东西，可能就会想了，“现在该做什么？如何将它用在我每天的编程中使用它？”这要视情况而定。如果你能使用像 Elm 或 Haskell 这样的纯函数语言，你就可以尝试全部想法。而且在这些语言中实现起来很方便。如果你只能使用像 JavaScript 这样的指令式语言，而且大多数肯定都是，仍然可以使用很多前面学到的知识，但将需要大量的规则。

变量是CSS预处理器存在的主要原因之一。为某样东西设置变量的能力，比如颜色，在CSS中让变量保持一致，可DRY，并且易于改变是很有用的。出于相同原因，也可以使用原生CSS变量（“CSS自定义属性”）。但有一些重要的差异应该清楚。

我将从这里说起: 在W3C标准规范中，使用CSS变量并没有任何条件。我认为这是规范文档中的一个很大的缺陷，CSS变量已经实现了很多我们之前无法实现的功能，并且我们未来可能大量使用，缺失文档描述着实让人沮丧。但是如果现在我们需要这些对CSS变量的描述怎么办？好，借助其他的CSS知识，我们可以在一些实例中略窥一二。

background属性是CSS中最常见的属性之一，它是一个简写属性，其包含background-color、background-image、background-repeat、background-attachment、background-position、background-clip、background-origin和background-size。你可能会说，这些属性再简单不过了，没有可讲的。这篇文章接下来要介绍的不是所有有关于background里面的属性，而是说说background-position属性。在详细介绍background-position之前，先要问大家，你真的了解这个属性吗？言外之意，接下来介绍是你所不了解的background-position相关细节。

CSS网格布局非常擅长在线制作漫画，特别是你想要灵活的实现你想要的漫画风格。这篇文章中我们通过使用巴里猫（Barry the cat）来演示如何构建一个具有响应式的漫画效果。

新出现的 CSS 颜色配置函数是一项非常有意思的功能，它给予我们在浏览器中直接操纵颜色的能力。例如，当鼠标悬停在按钮上时，可以使用color: color(black darkness(50%))改变颜色，而不需要使用 Sass 这类 CSS 预处理器。

大多数人知道现代网络浏览器使用GPU来渲染部分网页，特别是具有动画的部分。 例如，使用transform属性的CSS动画看起来比使用left和top属性的动画更平滑。 但是如果你问，“我如何从GPU获得平滑的动画？”在大多数情况下，你会听到像“使用transform:translateZ(0）或will-change:transform这样的建议。

这里有一些JavaScript初学者应该知道的技巧和陷阱。 如果你已经是一个专家，那就随意阅读。

2014年@Jason Pamental写了一篇博客详细介绍了Web排版的缩放。@Richard Rutter在另一篇文章中介绍如何更好的表达你的排版。比如在一个Banner区，如何让文本显示的各为大气，又适合你的Web排版。