fix format

Makefile

@@ -48,4 +48,4 @@ $(DOCS)/$(DOCS_FILENAME).html: $(CHAPTERS)
 	mkdir -p $(DOCS)
 	pandoc $(ARGS) --standalone --to=html5 -o $@ $^
 	cp -R $(IMAGES_FOLDER)/ $(DOCS)/$(IMAGES_FOLDER)/
-	cp $(CSS_FILE) $(DOCS)/$(CSS_FILE)	
+	cp $(CSS_FILE) $(DOCS)/$(CSS_FILE)

build/html/book.html

@@ -141,7 +141,7 @@
 <li><a href="#lets-recap">Let’s recap</a></li>
 <li><a href="#homework-7">Homework</a></li>
 </ul></li>
-<li><a href="#动作中的动画">动作中的动画</a><ul>
+<li><a href="#animations-in-action">Animations in action</a><ul>
 <li><a href="#a-symbiotic-relationship">A symbiotic relationship</a></li>
 <li><a href="#the-animation-property">The <code>animation</code> property</a></li>
 <li><a href="#keyframes">Keyframes</a></li>
@@ -173,6 +173,7 @@
 <li><a href="#example-scrolling-background">Example: Scrolling background</a></li>
 <li><a href="#part-1-background-animation">Part 1: Background animation</a></li>
 <li><a href="#part-2-adding-the-hover-transition">Part 2: Adding the hover transition</a></li>
+<li><a href="#adding-a-message">Adding a message</a></li>
 <li><a href="#summary-1">Summary</a></li>
 <li><a href="#homework-13">Homework</a></li>
 </ul></li>
@@ -644,8 +645,8 @@ <h2 id="lets-recap">Let’s recap</h2>
 <h2 id="homework-7">Homework</h2>
 <p>Before we start looking at the <code>animation</code> property, take some time to think about how you use transitions.</p>
 <p>Can you think of ways they could help smooth the interactions or state changes on your pages? How might they add appeal?</p>
-<h1 id="动作中的动画">动作中的动画</h1>
-<p>现在我们已经了解了 <code>transition</code> 属性，让我们深入了解下 <code>animation</code> 属性</p>
+<h1 id="animations-in-action">Animations in action</h1>
+<p>前面我们讲了 <code>transition</code> 属性，现在让我们来学习下 <code>animation</code> 属性</p>
 <p><img src="images/abc.png" /></p>
 <h2 id="a-symbiotic-relationship">A symbiotic relationship</h2>
 <p>给元素添加 <code>animation</code> 跟添加 <code>transition</code>类似。不过它还需要 <code>keyframes</code> 。</p>
@@ -706,8 +707,8 @@ <h2 id="homework-8">Homework</h2>
 <p>Open up <a href="http://codepen.io/donovanh/pen/WbqNwd?editors=110">this keyframes example</a> and try changing the code. See if you can break it, and fix it. Even better, if you come up with something cool, let me know!</p>
 <p>I love seeing how you’re getting on. You can <a href="mailto:[email protected]">email me</a> or get in touch <a href="https://twitter.com/donovanh">on Twitter</a>.</p>
 <h1 id="animation-properties">Animation properties</h1>
-<p>在我们看更多的动画示例之前，先了解一下 <code>animation</code> 的属性。</p>
-<p>与 <code>transition</code> 属性一样，<code>animation</code> 可以使用简写属性形式，也可以单独指定这些属性。</p>
+<p>在我们看更多的例子之前，先来了解下 <code>animation</code> 的各个属性。</p>
+<p>与 <code>transition</code> 一样，<code>animation</code> 可以使用简写形式，也可以分开单独指定属性值。</p>
 <h3 id="animation-delay">animation-delay</h3>
 <p>与 <code>transition-delay</code> 类似，此属性表示在开始之前动画的等待时间。在定义多个动画的情况下特别有用。</p>
 <p>如果定义的动画是不断循环的，在这种情况下，delay 属性并不会每次循环都有效，只有在给元素添加上动画效果的时候才有效。（只有第一次循环前会有等待时间，其余的就没有了）</p>
@@ -1000,7 +1001,7 @@ <h2 id="part-2-adding-the-hover-transition">Part 2: Adding the hover transition<
 }</code></pre>
 <p>上述代码表示当光标悬停在动画上时，它将暂停。当光标再次移开时，它将恢复其默认的 <code>playing</code> 状态。</p>
 <p>您也可以使用 JavaScript 实现此目的。一种可能性是当用户与页面的另一部分交互时，或者当它们滚动时，让一些 JavaScript 禁用动画。我们将看一下如何在以后滚动时启用动画。</p>
-<h3 id="adding-a-message">Adding a message</h3>
+<h2 id="adding-a-message">Adding a message</h2>
 <p>当用户将鼠标悬停在元素上时，我们可以使用 transition 来显示消息。要做到这一点，我们需要更多的 HTML：</p>
 <pre><code>&lt;div class=&quot;screen&quot;&gt;
   &lt;div class=&quot;message&quot;&gt;Hover message!&lt;/div&gt;

chapters/04/01.md

@@ -92,7 +92,7 @@
 
 您也可以使用 JavaScript 实现此目的。一种可能性是当用户与页面的另一部分交互时，或者当它们滚动时，让一些 JavaScript 禁用动画。我们将看一下如何在以后滚动时启用动画。
 
-### Adding a message
+## Adding a message
 
 当用户将鼠标悬停在元素上时，我们可以使用 transition 来显示消息。要做到这一点，我们需要更多的 HTML：