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。
Local development
对于复杂的项目,我更喜欢在本地开发。
Basic option: Simple HTML/CSS
最简单直接的就是创建一个 HTML 文件(filename.html)和一个 CSS 文件(filename.css),然后在 HTML 文件中链接 CSS 文件。这种方法虽然简单,但是写的时候要不断的在浏览器和编辑器直接来回切换,很麻烦。
我已经创建了一组基本的 HTML 和 CSS 文件,大家可以下载使用,下载地址:https://github.com/cssanimation/starter/archive/master.zip。
Dreamweaver / Macaw / Muse / Coda / Sublime
编辑器方面你可以选择任何一个你喜欢的用,这无所谓的。有一些编辑器可以对动效进行可视化编辑,如果你想用,也没问题的。
就我个人而言,我还是建议你自己去敲这些代码。这样子会加深对 CSS 的理解,以后遇到问题解决起来也容易,写复杂动效的时候也会更顺手。
Gulp
如果你熟悉 Github、Node,你会想在自己的电脑上搭建一套开发的脚手架。
Gulp 是以 Node 为基础,它的处理速度非常快。
它可以将 Sass 编译成 CSS ,自动添加浏览器前缀,同步浏览器渲染(这样你就不需要每次更新代码后要刷新浏览器再看效果了)。
如果你使用过Grunt或其他构建工具,你就会发现过程很类似。
我已经创建了一个Github库。如果你习惯使用Git,你可以去下载然后根据readme文档来进行配置。
如果愿意,大家可以一起改进它,欢迎 pull request。
In summary
在学习 CSS 动画的时候,你可以尝试上面提到的不同的方法。你可以自己搭建环境,也可以使用CodePen,都可以。
Homework
注册CodePen,然后尝试添加一些HTML和CSS来看一下效果。 也可以在首页上查看流行的CodePens。
Optional::如果你想本地开发,请下载下面的文件:
下一篇: 我们将学习 transitions!