随着苹果表的大量生产，我想，用CSS来实现拨号动画的时候到了。在这篇文章中，我们将使用keyframe动画和一点小技巧来实现苹果标表盘进度条动画。

本文是为帮助您入门和熟悉CSS动画而编写的，使用它们来为您带来基于Web的接口以及为艺术带来生命。虽然W3C的CSS动画规范仍在修订中，但是如今它已经有大量的内容可以供我们使用了。对我而言，CSS动画最令人激动的事情之一是，我们可以非常轻松地使用我们已经熟悉的工具来把它们添加进我们的项目中。如果您已经精通HTML和CSS，您就不需要学习新的语言或插件来为您的项目添加动态效果了。HTML和CSS已经足够，这是一个非常大的加分！无论你只是添加一点点引人注目的设计细节，还是添加非常多的动画，都没有问题。

华灯初上，窗外的雨淅淅沥沥飘打在窗户的玻璃之上。站在室内的你，望着雨中的夜色，是不是让你增添几分惆帐。似乎如此的场景只有在诗中才会出现。那么今天我们一起来用CSS技术来描绘这样的一个场景。这里仅是用CSS技术来演示这样的一个场景，可能并不太实用。然而这是一个探索CSS新功能的最佳机会。可以让你尝试使用一些新特性和新工具。并且逐渐将在工作中实践。在制作窗口雨滴效果，将使用到HAML和Sass。

这一次我们将使用CSS来画个超能陆战队里面大白的头像。我们的做法是在一个元素上，使用CSS动态改变背景图的位置，并且加上一些线性效果。

推特最近更新了他们的点赞按钮，使用了全新的动画，而这个动画使用一组动画来实现的而不是依赖于CSS的 transitions。今天使用CSS动画的steps方法来重建这个动画。

每年，苹果都会召开一次重大的会议。WWDC(苹果开发者大会)是iOS开发者和OSX开发者学习苹果先进高科技和移动设备与桌面软件新概念的好机会。每一年的这个时候，他们都会制造出很多新创意，今年，我被一个用简单圆圈和形状制作出来的图标所惊艳，于是我决定用HTML和CSS来实现它。

在这篇教程中，我将为你介绍如何在页面滚动时触发CSS动画。这种效果使用JavaScript和CSS就能做到。Jeet Grid System website 就是使用这种小技巧的例子，当你向下滚动的时候，CSS的transform、animation就被触发了。想要达到这种目的，有很多Javascript/jQuery 插件可以用，比如WOW,在这篇教程中，我将为你展示如何不适用插件做到这种效果。

加载动画在网页设计中是很常见的。用户们都希望网页加载又快又流畅而不是盯着屏幕苦等，而加载动画能够在内容加载完成前给用户视觉反馈，从而能够吸引用户而不让他们直接放弃继续浏览你的网站。

作为前端的设计师和工程师，我们用 CSS 去做样式、定位并创建出好看的网站。我们经常用 CSS 去添加页面的运动过渡效果甚至动画，但我们经常做的东西不会超过这些。动效是一个有助于访客和消费者理解我们设计的强有力工具。这里有些原则能最大限度地应用在我们的工作中。

Progress Bar直译过来就是“进度条”，也就是说今天要和大家一起探讨进度条的作方法。我想进度条大家都有看到过，而且还随处可见，他们表示的是某个过程，显示目前完成状态。最常见的是文件的上传和下载，有一个动态的进度条，通过这个进度可的动态变化告诉我们文件上传或下载的完成程度。换而言之，无论在某一个点或一个桌面程序，或者说我们的Web应用程序或，我们都需要使用到进度条的UI制作。那么在这篇文章中，我和大家一起来学习如何使用CSS3的相关属性来创建一个时尚的、动态的进度条，而且还将扩展一部分jQuery代码，让其从0至100％动态完成。

我们首先来看一看下面的DEMO效果：

下面我们针对上面的DEMO来说说其制作过程。