Creative environments

“You don’t learn to walk by following rules. You learn by doing, and by falling over.”Richard Branson

现在我们来看看如何在浏览器中构建和查看CSS animations。在开始敲代码之前，我们先来创建一套工作流。

我们将介绍两种方法:在浏览器中(线上)开发和离线(本地)开发。

In the browser

最简单的就是直接在线上开发然后看效果。我经常使用的是CodePen，还有一个叫JS Fiddle。

在本课程中，我将使用CodePen编写示例，所以大家有必要熟悉下它的使用。

CodePen是一个在线写代码的平台，你可以在上面编写 HTML、CSS 和 JavaScript ，然后立刻就能看到结果。屏幕被分成四个区域，分别是结果预览区，HTML，CSS 和 JavaScript编辑区。每个区域中都有一个设置选项可以进行不同的设置，比如设置用 Sass 代替 CSS。

对于复杂的项目，我更喜欢在本地开发。

最简单直接的就是创建一个 HTML 文件(filename.html)和一个 CSS 文件(filename.css)，然后在 HTML 文件中链接 CSS 文件。这种方法虽然简单，但是写的时候要不断的在浏览器和编辑器直接来回切换，很麻烦。

我已经创建了一组基本的 HTML 和 CSS 文件，大家可以下载使用，下载地址：https://github.com/cssanimation/starter/archive/master.zip。

编辑器方面你可以选择任何一个你喜欢的用，这无所谓的。有一些编辑器可以对动效进行可视化编辑，如果你想用，也没问题的。

就我个人而言，我还是建议你自己去敲这些代码。这样子会加深对 CSS 的理解，以后遇到问题解决起来也容易，写复杂动效的时候也会更顺手。

如果你熟悉 Github、Node，你会想在自己的电脑上搭建一套开发的脚手架。

Gulp 是以 Node 为基础，它的处理速度非常快。

它可以将 Sass 编译成 CSS ，自动添加浏览器前缀，同步浏览器渲染（这样你就不需要每次更新代码后要刷新浏览器再看效果了）。

如果你使用过Grunt或其他构建工具，你就会发现过程很类似。

我已经创建了一个Github库。如果你习惯使用Git，你可以去下载然后根据readme文档来进行配置。

如果愿意，大家可以一起改进它，欢迎 pull request。

在学习 CSS 动画的时候，你可以尝试上面提到的不同的方法。你可以自己搭建环境，也可以使用CodePen，都可以。

注册CodePen，然后尝试添加一些HTML和CSS来看一下效果。也可以在首页上查看流行的CodePens。

Optional::如果你想本地开发，请下载下面的文件:

下一篇: 我们将学习 transitions！