diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..e43b0f9 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.DS_Store diff --git a/Makefile b/Makefile new file mode 100644 index 0000000..a504d5d --- /dev/null +++ b/Makefile @@ -0,0 +1,39 @@ +BUILD = build +OUTPUT_FILENAME = book +METADATA = metadata.yml +CHAPTERS = chapters/**/*.md +TOC = --toc --toc-depth=2 +IMAGES_FOLDER = images +COVER_IMAGE = images/cover.png +LATEX_CLASS = report +MATH_FORMULAS = --webtex +CSS_FILE = style.css +CSS_ARG = --css=$(CSS_FILE) +ARGS = $(TOC) $(MATH_FORMULAS) $(CSS_ARG) + +all: book + +book: epub html pdf + +clean: + rm -r $(BUILD) + +epub: $(BUILD)/epub/$(OUTPUT_FILENAME).epub + +html: $(BUILD)/html/$(OUTPUT_FILENAME).html + +pdf: $(BUILD)/pdf/$(OUTPUT_FILENAME).pdf + +$(BUILD)/epub/$(OUTPUT_FILENAME).epub: $(METADATA) $(CHAPTERS) + mkdir -p $(BUILD)/epub + pandoc $(ARGS) --epub-metadata=$(METADATA) --epub-cover-image=$(COVER_IMAGE) -o $@ $^ + +$(BUILD)/html/$(OUTPUT_FILENAME).html: $(CHAPTERS) + mkdir -p $(BUILD)/html + pandoc $(ARGS) --standalone --to=html5 -o $@ $^ + cp -R $(IMAGES_FOLDER)/ $(BUILD)/html/$(IMAGES_FOLDER)/ + cp $(CSS_FILE) $(BUILD)/html/$(CSS_FILE) + +$(BUILD)/pdf/$(OUTPUT_FILENAME).pdf: $(METADATA) $(CHAPTERS) + mkdir -p $(BUILD)/pdf + pandoc $(ARGS) -V documentclass=$(LATEX_CLASS) -o $@ $^ diff --git a/build/epub/book.epub b/build/epub/book.epub new file mode 100644 index 0000000..8194569 Binary files /dev/null and b/build/epub/book.epub differ diff --git a/chapters/01/01.md b/chapters/01/01.md index 9d31363..3d29f6a 100644 --- a/chapters/01/01.md +++ b/chapters/01/01.md @@ -10,7 +10,7 @@ ## Hello,I'm Donovan -![Donovan Hutchinson](/images/donovan_hutchinson.jpg) +![Donovan Hutchinson](images/donovan_hutchinson.jpg) 大家好，我叫 Donovan ，我是一个设计师和前端工程师，我写过很多关于 CSS 的文章，也在 Smashing Magazine, Net Magazine, Tuts+, Adobe Inspire 上发表过很多。这是我的个人网站 [Hop.ie](http://hop.ie/)。今年以来，我一直在 [cssanimation.rocks](https://cssanimation.rocks/) 上写教程，主要是关于网页动效的，欢迎大家来阅读学习。 @@ -39,11 +39,11 @@ 一些不错的入门资源推荐给大家： -+ [Interactive HTML/CSS tutorials](http://www.codeavengers.com/) -+ [Learn to Code HTML&CSS](https://learn.shayhowe.com/html-css/) +- [Interactive HTML/CSS tutorials](http://www.codeavengers.com/) +- [Learn to Code HTML&CSS](https://learn.shayhowe.com/html-css/) ## Homework 每一章节后面都会有一个**课后作业**的部分，我会给大家出一些小题目，目的是让大家更好的学习以及巩固学到的知识。做不做完全取决于你，不过我建议大家最好都去做一下，你会发现自己对 CSS 动画的理解会更加深刻。 -**准备好了么**？让我们开始吧！ \ No newline at end of file +**准备好了么**？让我们开始吧！ diff --git a/chapters/01/02.md b/chapters/01/02.md index 1633573..8f34b75 100644 --- a/chapters/01/02.md +++ b/chapters/01/02.md @@ -14,21 +14,21 @@ 例如 CodePen 里面的保存按钮，它会抖动一下，提醒我们需要保存文件。 -![Animation Saved Button](/images/save_button-min.gif) +![Animation Saved Button](images/save_button-min.gif) 当元素在网页上出现时我们也可以添加动画。 -![Animating list items (https://cssanimation.rocks/list-items/)](/images/list_item-min.gif) +![Animating list items (https://cssanimation.rocks/list-items/)](images/list_item-min.gif) 上面的例子中通过动画，让用户更加明显和生动地感受到新内容添加到列表里了，而不是很生硬的一下子就添加好了，这样子给用户的体验会更好一些。多看几个例子： 游戏 [Portal](http://hop.ie/portal/)： -![Portal animation](/images/portal-min.gif) +![Portal animation](images/portal-min.gif) [sprout.js](http://sprout.is/)： -![Animated chart from Sprout](/images/sprout-min.gif) +![Animated chart from Sprout](images/sprout-min.gif) ## With great power comes great responsibility @@ -40,7 +40,7 @@ 下面的例子就很好的说明了这点：当需要指引用户去查看按钮的的时候，动画就停止了。 -![National Parks from Rally Interactive](/images/ribbon-min.gif) +![National Parks from Rally Interactive](images/ribbon-min.gif) ## Inspiration diff --git a/chapters/01/03.md b/chapters/01/03.md index 9b7d438..4860639 100644 --- a/chapters/01/03.md +++ b/chapters/01/03.md @@ -26,7 +26,7 @@ CodePen是一个在线写代码的平台，你可以在上面修改HTML、CSS和 我已经创建了一组基本的 HTML 和 CSS 文件，大家可以下载使用，下载地址：[https://github.com/cssanimation/starter/archive/master.zip](https://github.com/cssanimation/starter/archive/master.zip)。 -![Starting files](../../images/files.jpg) +![Starting files](images/files.jpg) ### Dreamweaver / Macaw / Muse / Coda / Sublime diff --git a/chapters/01/04.md b/chapters/01/04.md index 36f2b69..018c2bd 100644 --- a/chapters/01/04.md +++ b/chapters/01/04.md @@ -10,23 +10,23 @@ 使用 CSS 中的 `transition` 属性，我们可以在浏览器里制作动画。`transition` 指从一个状态到另一个状态的动画模拟。 -![Transitions: A to B](../../images/ab.png) +![Transitions: A to B](images/ab.png) 当我们告诉浏览器，我们想在某个元素上使用 transition 时，就是让浏览器在状态的变化过程中对属性进行自动插值。 -![Animated transition from A to B (http://codepen.io/donovanh/pen/RNdxqw)](../../images/ab_animated.png) +![Animated transition from A to B (http://codepen.io/donovanh/pen/RNdxqw)](images/ab_animated.png) 举个例子，我们可以在一个元素鼠标悬停的时候，使用过渡来改变元素的样式，让浏览器产生从起始状态到终止状态的平滑的过渡效果。 -![Animated button (http://codepen.io/donovanh/pen/MYQdZd)](../../images/button.png) +![Animated button (http://codepen.io/donovanh/pen/MYQdZd)](images/button.png) ## Transition properties 我们可以在元素的很多属性上创建过渡效果。我们可以控制过渡的快慢，延迟，还可以用 `timing function` 控制过渡具体的变化速度。来看几个例子。 -![Combining transitions (http://in-ni.com/)](../../images/winnie-min.gif) +![Combining transitions (http://in-ni.com/)](images/winnie-min.gif) -![More transitions (http://codepen.io/suez/pen/XJGOyL)](../../images/transitions-min.gif) +![More transitions (http://codepen.io/suez/pen/XJGOyL)](images/transitions-min.gif) ## In summary diff --git a/chapters/01/05.md b/chapters/01/05.md index 89bf31a..4c1c981 100644 --- a/chapters/01/05.md +++ b/chapters/01/05.md @@ -10,9 +10,9 @@ 过渡都是平滑的状态变化，而动画是一种描述多个步骤的方法。 -![Transitions: A to B](/images/ab-min.gif) +![Transitions: A to B](images/ab-min.gif) -![Animations: A to B to C](/images/abc.png) +![Animations: A to B to C](images/abc.png) 动画更适用于浏览器中相对复杂的移动场景。上面的例子中有三种场景（A，B，C）。转换只会从A到C，而动画允许我们指定步骤B是什么样子的，并确保动画遵循所有三个步骤。 @@ -24,7 +24,7 @@ 我们在 Codepen 上看到的“Save”按钮世纪上是一个关于动画的很好例子。 -![Save Button on CodePen](/images/save_button-min.gif) +![Save Button on CodePen](images/save_button-min.gif) 它能很好的让人们注意到这个按钮。 @@ -32,11 +32,11 @@ 另一个示例是来自 Twitter 的 app 构建平台，用于 [Fabric](https://get.fabric.io/) 的登录页面。CSS 动画在这里被很好地使用，有助于传达 Fabric 的模块化概念，同时还确立了信誉: -![Fabric hero image animation](/images/fabric-min.gif) +![Fabric hero image animation](images/fabric-min.gif) 最后，是我去年在一个会议预告网站上做的一个例子，这是一个 CSS Mac Plus，用来在网上 [theWeb.is teaser](http://theweb.is/) 展示欢迎信息。 -![Mac Plus created using CSS](/images/macplus-min.gif) +![Mac Plus created using CSS](images/macplus-min.gif) CSS Mac Plus 可以在 [CodePen](https://codepen.io/donovanh/full/HGqjp/) 上面看到，[这里](https://cssanimation.rocks/macplus/)是关于如何实现的指导。 @@ -46,7 +46,7 @@ CSS Mac Plus 可以在 [CodePen](https://codepen.io/donovanh/full/HGqjp/) 上面 动画更加复杂，它允许您创建具有任意关键帧的动画序列。它们会自动触发，并且可以循环。 -![Transition vs Animation](/images/transitions-animations-min.gif) +![Transition vs Animation](images/transitions-animations-min.gif) 我们很快将花一些时间来学习动画属性。同时，也要注意网上动画的有趣用法，如果你找到一个好的，[请告诉我](mailto:donovan@cssanimation.rocks)! diff --git a/chapters/02/01.md b/chapters/02/01.md index 9ae928f..cf4ddc8 100644 --- a/chapters/02/01.md +++ b/chapters/02/01.md @@ -11,22 +11,22 @@ 那 `transition` 怎么用呢？来看下面代码： ```css - transition: background 0.5s linear; +transition: background 0.5s linear; ``` -在上面的代码中，我们告诉浏览器，我们希望在0.5秒的时间里，按照 `linear` 的时间函数([timing-function](https://developer.mozilla.org/zh-CN/docs/Web/CSS/timing-function))来改变某个元素的 `background` 属性。 +在上面的代码中，我们告诉浏览器，我们希望在 0.5 秒的时间里，按照 `linear` 的时间函数([timing-function](https://developer.mozilla.org/zh-CN/docs/Web/CSS/timing-function))来改变某个元素的 `background` 属性。 下面结合具体的例子来看一下：我们希望当鼠标在按钮上悬停时(`hover`)改变按钮的 `background`。 ```css - button { - background: white; - transition: background 0.5s linear; - } - - button:hover { - background: green; - } +button { + background: white; + transition: background 0.5s linear; +} + +button:hover { + background: green; +} ``` 这里有一点要注意，`transition` 属性的位置要放到 `button` 中。这样会告诉浏览器，不光按钮从初始状态**变成**悬停(`hover`)的时候要添加过渡效果，当从悬停状态**变回**初始状态时也要添加过渡效果。 @@ -35,16 +35,16 @@ ## Example: Button transition -![](../../images/button-min.gif) +![](images/button-min.gif) -[你可以查看CodePen上的代码，并尝试修改代码来体会不同的效果。](http://codepen.io/donovanh/pen/MYQdZd) +[你可以查看 CodePen 上的代码，并尝试修改代码来体会不同的效果。](http://codepen.io/donovanh/pen/MYQdZd) -请注意CodePen代码里以 `transition-` 开头的属性。这里用了全写的方式。 +请注意 CodePen 代码里以 `transition-` 开头的属性。这里用了全写的方式。 ```css - transition-property: all; - transition-duration: 0.4s; - transition-timing-function: ease-out; +transition-property: all; +transition-duration: 0.4s; +transition-timing-function: ease-out; ``` 上面的代码的意思希望浏览器在**0.4s**的时间里改变**all**所有的属性，包括 `colours, size, position` 等。 @@ -52,7 +52,7 @@ 可以将 `transition-timing-function` 设置成下面的贝塞尔曲线函数形式，试试效果会发生什么改变。 ```css - transition-timing-function: cubic-bezier(.59,-0.26,.33,1.42) +transition-timing-function: cubic-bezier(0.59, -0.26, 0.33, 1.42); ``` ## Prefixes and browser compatibility diff --git a/chapters/02/02.md b/chapters/02/02.md index 96ba6be..9427e19 100644 --- a/chapters/02/02.md +++ b/chapters/02/02.md @@ -68,11 +68,11 @@ 举个栗子说明下：[Baymax example](http://cssanimation.rocks/baymax/) 。 -![Source: http://cssanimation.rocks/baymax/](../../images/baymax-min.gif) +![Source: http://cssanimation.rocks/baymax/](images/baymax-min.gif) 再来一个：[button sheen effect](https://cssanimation.rocks/pseudo-elements/) -![Source: https://cssanimation.rocks/pseudo-elements/](../../images/sheen-min.gif) +![Source: https://cssanimation.rocks/pseudo-elements/](images/sheen-min.gif) ## Homework diff --git a/chapters/02/03.md b/chapters/02/03.md index 54fb01d..f2b88a1 100644 --- a/chapters/02/03.md +++ b/chapters/02/03.md @@ -6,11 +6,11 @@ 第一个例子，我们使用 `linear`： -![Linear transition](../../images/linear-min.gif) +![Linear transition](images/linear-min.gif) 第二个例子，我们使用 `cubic-bezier`： -![Cubic-bezier timing function](../../images/demo-min.gif) +![Cubic-bezier timing function](images/demo-min.gif) 通过 `cubic-bezier`，我们让边框开始时先往里缩一下，然后再开始改变。结束的时候先变大一点然后再缩回到正确的大小。 @@ -20,31 +20,31 @@ ## Linear -![Linear](../../images/linear-example-min.gif) +![Linear](images/linear-example-min.gif) `linear` 表示属性值按照一个固定的速度线性的变化，中间不会有突变，所以不会出现加快或减慢的状态。非常适合速度不变的场景下使用，比如车窗外不断飞过的风景或者一直旋转的月亮。 ## Ease-in -![Ease-in](../../images/ease-in-min.gif) +![Ease-in](images/ease-in-min.gif) `ease-in` 表示属性值先以较慢速度变化，然后速度越来越快，就好比一个球从高处落下，一开始下降的速度很慢，然后越来越快。 ## Ease-out -![Ease-out](../../images/ease-out-min.gif) +![Ease-out](images/ease-out-min.gif) `ease-out` 刚好跟 `ease-in` 相反，一开始速度快，然后速度越来越慢。最适合元素从屏外进入屏内进行显示的情况。 ## Ease-in-out -![Ease-in-out](../../images/ease-in-out-min.gif) +![Ease-in-out](images/ease-in-out-min.gif) `ease-in-out` 是上面两个的合成，一开始慢，然后变快，然后又变慢。做加载的效果时用这个时间函数效果会很不错。 ## Cubic-bezier -![Cubic-bezier (custom)](../../images/cubic-bezier-min.gif) +![Cubic-bezier (custom)](images/cubic-bezier-min.gif) 上面所讲的时间函数本质上都是贝塞尔曲线。利用 `cubic-bezier` 我们可以自定义具体的变化曲线。 @@ -56,7 +56,7 @@ 两个控制点坐标为 `(1, -0.49)` 和 `(.13, 1.09)`，画个坐标系来看一下： -![Source: http://cubic-bezier.com/#1,-0.49,.13,1.09](../../images/cubic-bezier-graph.png) +![Source: http://cubic-bezier.com/#1,-0.49,.13,1.09](images/cubic-bezier-graph.png) 有个在线工具[cubic-bezier.com](http://cubic-bezier.com)可以实时看到通过拖动控制点生成不同的曲线。 @@ -64,11 +64,11 @@ ## Steps -![Steps](../../images/steps-min.gif) +![Steps](images/steps-min.gif) 目前为止讲过的时间函数（速度的变化）都是连续的曲线，`steps` 可以将过渡时间分成大小相等的时间时隔来运行。比如使用 `steps(4)`，效果就会变成如上图那样不连续的效果。 -![](../../images/steps.png) +![](images/steps.png) 这适合做精灵动画(`sprite animation`)。比如一个精灵动画有4帧，设置`steps`，就可以通过改变`background position` 来创建动画了。 diff --git a/chapters/02/04.md b/chapters/02/04.md index de841df..a4ca521 100644 --- a/chapters/02/04.md +++ b/chapters/02/04.md @@ -12,7 +12,7 @@ 前面我们提到的 `button` 的例子比较简单，这里我们来看个复杂的例子。 -![Source: http://codepen.io/donovanh/pen/YPMGpJ](../../images/multiple-button-min.gif) +![Source: http://codepen.io/donovanh/pen/YPMGpJ](images/multiple-button-min.gif) 在这个[例子](http://codepen.io/donovanh/pen/YPMGpJ)里我们创造了一个比较复杂的 `hover` 效果，但我们其实关键的样式只有一句话: @@ -24,11 +24,11 @@ 本例中的按钮由两个 icon 和两个 text 组成。初始状态（鼠标未悬停）显示 follow me 和 twitter 的 icon，@ 标志和 cssanimation 不显示。 -![](../../images/button-element-positioning.png) +![](images/button-element-positioning.png) 当鼠标悬停时再显示 @ 标志和 cssanimation 文本。 -![](../../images/button-element-positioning2.png) +![](images/button-element-positioning2.png) 我们使用 CSS 中的 `transform` 来实现上面的显示和隐藏。对 twitter icon 进行绝对定位，设置其 `left` 和 `top` @@ -62,7 +62,7 @@ 再看一个例子。在本例中，当鼠标在卡片上悬停时，下方会显示文字。 -![Source: http://codepen.io/donovanh/pen/LEvjJg](../../images/cat-min.gif) +![Source: http://codepen.io/donovanh/pen/LEvjJg](images/cat-min.gif) 分析下这个效果：初始时其实 text 也是显示的，只不过设置了 `opacity` 为0，让它变得透明，所以看不见。鼠标悬停时，把 `opacity` 改为1，同时修改文本外层容器的高度。【Tips：初始时外层的 `info` 容器设置了 `overflow:hidden`， 同时对文本设置了 `transform`， 将其从可视区域移出去，并且设置其 `opacity` 为0，所以文字就被隐藏了】 diff --git a/chapters/02/05.md b/chapters/02/05.md index 397090f..c0dee81 100644 --- a/chapters/02/05.md +++ b/chapters/02/05.md @@ -10,7 +10,7 @@ 看下面的例子，具体代码可见[CodePen](http://codepen.io/donovanh/pen/YPbxqa)。 -![Source: http://codepen.io/donovanh/pen/YPbxqa](../../images/js-triggered-button-min.gif) +![Source: http://codepen.io/donovanh/pen/YPbxqa](images/js-triggered-button-min.gif) ```html diff --git a/chapters/03/01.md b/chapters/03/01.md index 520e93a..659941d 100644 --- a/chapters/03/01.md +++ b/chapters/03/01.md @@ -2,7 +2,7 @@ 现在我们已经了解了 `transition` 属性，让我们深入了解下 `animation` 属性 -![](../../images/abc.png) +![](images/abc.png) ## 共生关系 @@ -41,7 +41,7 @@ 我认为用一个例子来描述它是十分有用的。让我们从网页的 `div` 标签开始随着时间变化改变背景色。从蓝色背景开始，变为橙色，最后变为绿色。 -![](../../images/change-background-min.gif) +![](images/change-background-min.gif) 如果我们尝试向某些人解释背景色是如何跟随时间改变的，我们也许会这么说： @@ -77,7 +77,7 @@ 当您从上到下阅读代码时，百分比描述了每个关键帧发生在动画中的距离。我们可以在这里看到它： -![Source: http://codepen.io/donovanh/pen/WbqNwd?editors=110](../../images/simple-keyframes-min.gif) +![Source: http://codepen.io/donovanh/pen/WbqNwd?editors=110](images/simple-keyframes-min.gif) 当动画发生时，浏览器会创建从每种背景颜色到下一种颜色所需的中间帧。通过告诉浏览器我们希望div从一种颜色开始，中间变成另外一种颜色，最后变成第三种颜色结束，浏览器可以完成在每个点之间创建动画的工作。 @@ -85,7 +85,7 @@ 之前，我曾提到使用 animation-direction 属性来替换动画。这是它的样子： -![](../../images/simple-keyframes-alternating-min.gif) +![](images/simple-keyframes-alternating-min.gif) 在这种情况下，我已将 animation-direction 属性更改为 alternate。[在 CodePen 上](http://codepen.io/donovanh/pen/NPZqej)看到它。 diff --git a/chapters/03/02.md b/chapters/03/02.md index 3f3000a..3b9849d 100644 --- a/chapters/03/02.md +++ b/chapters/03/02.md @@ -33,7 +33,7 @@ > 这里多添了个例子来说明 forwards 和 backwards（原作者并没有写）。 > 在这个[例子](https://codepen.io/jiangxiaoxin/pen/QzWYwG)里使用了 animation-delay 和 animation-fill-mode。从效果上来看，设置 backwards，点击“开始动画”之后，backwards 会立刻变成动画真实过程(animation-duration)第一帧的样子，一直持续整个 animation-delay 时间，然后开始变化，最后动画结束后又变回了最一开始没有添加动画时的状态。 -![](../../images/animation-fill-mode.gif) +![](images/animation-fill-mode.gif) ### animation-iteration-count diff --git a/chapters/03/03.md b/chapters/03/03.md index 4f40078..d440687 100644 --- a/chapters/03/03.md +++ b/chapters/03/03.md @@ -34,7 +34,7 @@ 还记得之前讲过的"Save"按钮吗？我们再重新回顾一下： -![Source: http://codepen.io/donovanh/pen/KwEQdQ](../../images/save_button-min.gif) +![Source: http://codepen.io/donovanh/pen/KwEQdQ](images/save_button-min.gif) 在开始添加 `animation` 之前，我先在页面上添加了一个按钮，然后设置了它的基本样式，让它看起来像 `CodePen` 的按钮。在这里我用了绝对定位让它显示在屏幕的中间。 @@ -80,7 +80,7 @@ 具体怎么旋转和变化的我们看下面的动图，我们发现浏览器自动完成了每个关键帧之间的插值。 -![Source: http://codepen.io/donovanh/pen/pvXJqp](../../images/wiggle-min.gif) +![Source: http://codepen.io/donovanh/pen/pvXJqp](images/wiggle-min.gif) [CodePen链接](http://codepen.io/donovanh/pen/KwEQdQ) diff --git a/chapters/03/04.md b/chapters/03/04.md index 1d79ae8..75afa4f 100644 --- a/chapters/03/04.md +++ b/chapters/03/04.md @@ -6,7 +6,7 @@ 有这么种情况:一个页面上会有好几个 animation，每个 animation 都有自己的时间设置，我们希望这些 animation 保持同步，最好的例子就是交通灯了。【TIPS：同步的意思是说，希望这些 animation 之间保持一种确定的时间关系。】 -![Source: http://codepen.io/donovanh/pen/ogRRdR?editors=010](/images/traffic-lights-min.gif) +![Source: http://codepen.io/donovanh/pen/ogRRdR?editors=010](images/traffic-lights-min.gif) 这里有3盏灯，我们为每一盏灯写了一个 animation @@ -26,7 +26,7 @@ 参照下面的图，从功能出发，很容易理解3盏灯的动画之间的逻辑关系（在这里逻辑关系就是指的它们之间的时间关系） -![](/images/traffic-light-grid.png) +![](images/traffic-light-grid.png) 从图中看，一共分5个阶段或者说5个步骤，在每个阶段，不同的灯处于 on 或者 off 的状态。那么我们很明显就是将0% - 100%的时间跨度分成5份,每20%为一个状态，设置不同状态下的参数。 diff --git a/chapters/04/01.md b/chapters/04/01.md index 50a096d..d0fbc1f 100644 --- a/chapters/04/01.md +++ b/chapters/04/01.md @@ -8,15 +8,15 @@ 我最近发现的一个很好的例子是 Fabric 登陆页面。CSS animatiom 显示了 Fabric 如何为模块化框架工作。 -![Source: https://get.fabric.io/](../../images/fabric-min.gif) +![Source: https://get.fabric.io/](images/fabric-min.gif) 另一个有趣的例子是 Mailchimp 主页。在这里，hero image 讲述了如何创建电子邮件的故事。 -![Source: http://mailchimp.com](../../images/mailchimp-min.gif) +![Source: http://mailchimp.com](images/mailchimp-min.gif) 您可能还在 [my CSS Animation 101 email course](https://cssanimation.rocks/courses/animation-101/) 登录页面上看到了它： -![Source: https://cssanimation.rocks/courses/animation-101/](../../images/course-min.gif) +![Source: https://cssanimation.rocks/courses/animation-101/](images/course-min.gif) 在以上示例中，他们都使用动画来设置页面的色调并说明网站的内容。 @@ -24,7 +24,7 @@ 让我们创建一个例子。在这个例子中，我创建了一个在网页上下移动的 “web page” 样式图形。 -![Source: http://codepen.io/donovanh/pen/LEwedW?editors=110](../../images/screen-min.gif) +![Source: http://codepen.io/donovanh/pen/LEwedW?editors=110](images/screen-min.gif) 对于一些交互、动画暂停、鼠标悬停在屏幕上时显示消息等都是利用 animations 和 transitions 来实现的。 @@ -116,7 +116,7 @@ 由于我们在 “message” 样式上设置了 `transition`，因此当光标悬停在元素上和离开时，它都会创建动画。暂停的动画和过渡效果如下所示： -![Source: http://codepen.io/donovanh/pen/LEwedW?editors=110](../../images/screen-hover-min.gif) +![Source: http://codepen.io/donovanh/pen/LEwedW?editors=110](images/screen-hover-min.gif) ## Summary diff --git a/chapters/04/02.md b/chapters/04/02.md index e1381dc..3ec27c6 100644 --- a/chapters/04/02.md +++ b/chapters/04/02.md @@ -2,7 +2,7 @@ 可乐爆米花准备好了么！在这章中我们要做一个有意思的 SVG 动画。我们将在 “The Force Awakens”（《星球大战7:原力觉醒》）电影预告片中制作 “Star Wars” 的片名。。 -![Source: https://www.youtube.com/watch?v=ngElkyQ6Rhs](../../images/starwars-min.gif) +![Source: https://www.youtube.com/watch?v=ngElkyQ6Rhs](images/starwars-min.gif) 这个例子是将 CSS 动画与其他一些 CSS 属性相结合后呈现的，特别是 `transforms`、`scale`、`translate` 和 `rotate`。 @@ -34,7 +34,7 @@ 通过一些绝对定位将内容定位在屏幕中间，我们从这开始： -![](../../images/starwars.png) +![](images/starwars.png) ## Animating the Star and Wars @@ -128,7 +128,7 @@ 把它放在一起就是 [finished demo](http://codepen.io/donovanh/pen/pJzwEw?editors=110)。 -![Source: http://codepen.io/donovanh/pen/pJzwEw?editors=110](../../images/css-starwars-min.gif) +![Source: http://codepen.io/donovanh/pen/pJzwEw?editors=110](images/css-starwars-min.gif) ## Homework diff --git a/chapters/04/03.md b/chapters/04/03.md index e7906e5..1f1be0c 100644 --- a/chapters/04/03.md +++ b/chapters/04/03.md @@ -12,7 +12,7 @@ Web动画的一种常见用途是在浏览器滚动时向元素添加动作。 有许多 JavaScript 选项可以添加类，我发现了一个好用的是 [Wow.js](http://mynameismatthieu.com/WOW/)。让我们用 Wow.js 来创建一个简单的例子，当我们滚动鼠标时，内容会淡入视图。 -![Source: http://codepen.io/donovanh/pen/gbVMjm](../../images/scroll-min.gif)"> +![Source: http://codepen.io/donovanh/pen/gbVMjm](images/scroll-min.gif)"> ## Using Wow.js diff --git a/metadata.yml b/metadata.yml new file mode 100644 index 0000000..7f629f8 --- /dev/null +++ b/metadata.yml @@ -0,0 +1,9 @@ +--- +title: CSS Animation 101 +author: Donovan Hutchinson +rights: Creative Commons Attribution 4.0 International +language: en-US +tags: [css animation, html, css, web development] +abstract: | + Learn how to add animation to your web projects +--- diff --git a/style.css b/style.css new file mode 100644 index 0000000..1d51b65 --- /dev/null +++ b/style.css @@ -0,0 +1,325 @@ + +html { + font-size: 100%; + overflow-y: scroll; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; +} + +body { + color: #444; + font-family: Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif; + font-size: 12px; + line-height: 1.7; + padding: 1em; + margin: auto; + max-width: 42em; + background: #fefefe; +} + +a { + color: #0645ad; + text-decoration: none; +} + +a:visited { + color: #0b0080; +} + +a:hover { + color: #06e; +} + +a:active { + color: #faa700; +} + +a:focus { + outline: thin dotted; +} + +*::-moz-selection { + background: rgba(255, 255, 0, 0.3); + color: #000; +} + +*::selection { + background: rgba(255, 255, 0, 0.3); + color: #000; +} + +a::-moz-selection { + background: rgba(255, 255, 0, 0.3); + color: #0645ad; +} + +a::selection { + background: rgba(255, 255, 0, 0.3); + color: #0645ad; +} + +p { + margin: 1em 0; +} + +img { + max-width: 100%; +} + +h1, h2, h3, h4, h5, h6 { + color: #111; + line-height: 125%; + margin-top: 2em; + font-weight: normal; +} + +h4, h5, h6 { + font-weight: bold; +} + +h1 { + font-size: 2.5em; +} + +h2 { + font-size: 2em; +} + +h3 { + font-size: 1.5em; +} + +h4 { + font-size: 1.2em; +} + +h5 { + font-size: 1em; +} + +h6 { + font-size: 0.9em; +} + +blockquote { + color: #666666; + margin: 0; + padding-left: 3em; + border-left: 0.5em #EEE solid; +} + +hr { + display: block; + height: 2px; + border: 0; + border-top: 1px solid #aaa; + border-bottom: 1px solid #eee; + margin: 1em 0; + padding: 0; +} + +pre, code, kbd, samp { + color: #000; + font-family: monospace, monospace; + _font-family: 'courier new', monospace; + font-size: 0.98em; +} + +pre { + white-space: pre; + white-space: pre-wrap; + word-wrap: break-word; +} + +b, strong { + font-weight: bold; +} + +dfn { + font-style: italic; +} + +ins { + background: #ff9; + color: #000; + text-decoration: none; +} + +mark { + background: #ff0; + color: #000; + font-style: italic; + font-weight: bold; +} + +sub, sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +ul, ol { + margin: 1em 0; + padding: 0 0 0 2em; +} + +li p:last-child { + margin-bottom: 0; +} + +ul ul, ol ol { + margin: .3em 0; +} + +dl { + margin-bottom: 1em; +} + +dt { + font-weight: bold; + margin-bottom: .8em; +} + +dd { + margin: 0 0 .8em 2em; +} + +dd:last-child { + margin-bottom: 0; +} + +img { + border: 0; + -ms-interpolation-mode: bicubic; + vertical-align: middle; +} + +figure { + display: block; + text-align: center; + margin: 1em 0; +} + +figure img { + border: none; + margin: 0 auto; +} + +figcaption { + font-size: 0.8em; + font-style: italic; + margin: 0 0 .8em; +} + +table { + margin-bottom: 2em; + border-bottom: 1px solid #ddd; + border-right: 1px solid #ddd; + border-spacing: 0; + border-collapse: collapse; +} + +table th { + padding: .2em 1em; + background-color: #eee; + border-top: 1px solid #ddd; + border-left: 1px solid #ddd; +} + +table td { + padding: .2em 1em; + border-top: 1px solid #ddd; + border-left: 1px solid #ddd; + vertical-align: top; +} + +.author { + font-size: 1.2em; + text-align: center; +} + +@media only screen and (min-width: 480px) { + body { + font-size: 14px; + } +} +@media only screen and (min-width: 768px) { + body { + font-size: 16px; + } +} +@media print { + * { + background: transparent !important; + color: black !important; + filter: none !important; + -ms-filter: none !important; + } + + body { + font-size: 12pt; + max-width: 100%; + } + + a, a:visited { + text-decoration: underline; + } + + hr { + height: 1px; + border: 0; + border-bottom: 1px solid black; + } + + a[href]:after { + content: " (" attr(href) ")"; + } + + abbr[title]:after { + content: " (" attr(title) ")"; + } + + .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { + content: ""; + } + + pre, blockquote { + border: 1px solid #999; + padding-right: 1em; + page-break-inside: avoid; + } + + tr, img { + page-break-inside: avoid; + } + + img { + max-width: 100% !important; + } + + @page :left { + margin: 15mm 20mm 15mm 10mm; +} + + @page :right { + margin: 15mm 10mm 15mm 20mm; +} + + p, h2, h3 { + orphans: 3; + widows: 3; + } + + h2, h3 { + page-break-after: avoid; + } +}