这两天一直在探究CSS Animation中animation-fill-mode属性中的细节，那是有原因的，具体原因是什么就不多说了。虽然在《理解animation-fill-mode属性》一文让我稍加对该属性有一定的了解。但还有一些潜在的细节和因素还是不为人知。所以我决定花一定的时间彻底的来剖析animation-fill-mode。如果你感兴趣，请继续往下阅读。

Grid布局来了，Grid布局来了。千真万确，各大浏览器将发布对Grid布局的支持。唔哈哈哈哈~2017年3月，Chrome和Firefox将开始默认支持Grid布局。其中，Mozilla将在3月7日发布的Firefox 52版本上开始支持。由于要先在Chrome Canary中支持Grid，所以，谷歌将在3月14号的Chrome 57版本上开始默认支持Grid.一旦在公开版本中默认得到了支持，那么当前在开发版本中的所有Grid功能都将在公开版本中出现。Grid时代就此开始。

我相信很多前端开发人员都有基于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知识，我们可以在一些实例中略窥一二。

我们是手机淘宝 虚拟互动实验团队，我们团队专门负责手机淘宝互动活动项目，致力于打造顶级互动氛围；我们面对的亿级用户群体，你的一个创意，一个效果直接向上亿级用户展示。我们是一个有实力的团队，是一个具有高颜值团队，我们更欢迎您的加入。如果您够自信，欢迎简历发至：weihua.lwh@alibaba-inc.com （坐标：杭州西厂）

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 预处理器。