上周，我写了一篇关于如何使用CSS制作bitsofcode logo的动画效果。之后收到一些建议，尝试比较一下CSS动画和Web Animations API。所以今天写了这篇文章。

CSS自定义属性又称为CSS的变量或者原生变量。其和CSS处理器里的变量还是略有不同，但这篇文章我们要聊的并不是这个东东，咱们想聊聊CSS自定义属性怎么制作动画。

如果你也喜欢萌萌的百度熊，如果你也喜欢SVG，如果你也喜欢动画，那一起动手来写写这个Demo。看看如何使用SVG写一个会动的，萌萌的百度熊

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

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

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

CSS Animation是实现Web Animation方法之一，其主要通过@keyframes和animation-*或者transition来实现一些Web动效。不过今天我们聊的不是怎么制作Web动画，咱们来聊聊CSS Animation性能相关的话题。

自从几年前入手智能型手机之后，对于行动装置上特有的陀螺仪 ( 三轴 ) 侦测与感应器就蛮感兴趣的，而相关的应用除了在一些典型的 APP 里头很常见之外 ( 指南针、水平仪、星空定位...等 )，在游戏里头更是屡见不鲜 ( 赛车、跑酷、飞行、滚球...等 )，但撇除 APP 不谈，过去在网页里头要使用陀螺仪的三轴感测，几乎是不可能，应该是说沒这个必要，因为在智能行动装置尚未普及的年代，谁会搬台电脑转来转去呢？

大家可能还记得前段时间淘宝造物节的宣传动画效果,让自己对CSS 360全景更充满好奇之心。最近有关于这方面的文章也是层出不穷，比如@凹凸实验室团队的@J.c就整理了一篇有关于这方面的文章。尽从效果上，就吸引了大家不少的眼球，当然大家更期待的是如何自己能实现这样的效果。那么我们来开始一起探讨这方面的事情。

3D 全景并不是什么新鲜事物了，但以前我们在 Web 上看到的 3D 全景一般是通过 Flash 实现的。若我们能将 CSS3 Transform 的相关知识运用得当，也是能实现类似的效果。换句话说，3D 全景其实就是 CSS3 3D 的应用场景之一。