Some improvements

chapters/0101.md

@@ -23,7 +23,7 @@ By the end of this book you should be confident enough to begin applying animati
 
 Here's what we're going to cover.
 
-**First:** What's animation anyway? This week we'll look at why we animate. We'll also introduce the `transition` and `animation` properties and some sources of inspiration.
+**First:** What's animation anyway? We'll look at why we animate. We'll also introduce the `transition` and `animation` properties and some sources of inspiration.
 
 **Then:** All about the **transition** property. We'll learn how transitions work, and the properties we can control to change the movement.
 

chapters/0102.md

@@ -35,9 +35,7 @@ We can use animation to tell a story:
 
 ![Portal animation (http://hop.ie/portal/)](images/portal-min.gif)
 
-The above is based on an instructional video for the game "Portal". However, telling stories through our content doesn't always need to be so literal. We can add subtle movement to show how data changes in a chart, like this example from [Sprout](http://sprout.is):
-
-![Animated chart from Sprout](images/sprout-min.gif)
+The above is based on an instructional video for the game "Portal". However, telling stories through our content doesn't always need to be so literal. We can add subtle movement, such as showing data changes in a chart. In this way, data can itself tell a story with animation helping.
 
 ## With great power comes great responsibility
 
@@ -45,9 +43,7 @@ It's easy to do too much with animation. Having too many things moving around on
 
 This might mean only moving a small item on your page. Sometimes it's ok to do _less_.
 
-Having said that, if you want to create more of a "wow" effect with larger animations, you can do so. If you do, make sure and stop when it's time for your viewers to focus on the content. This example from Rally does just that, with lots of movement going on that stops when it's time to read the menu content:
-
-![National Parks from Rally Interactive](images/ribbon-min.gif)
+Having said that, if you want to create more of a "wow" effect with larger animations, you can do so. Just make sure and stop when it's time for your viewers to focus on the content. This might mean setting animations to play once rather than infinitely, or stopping animations when people begin to scroll a page.
 
 ## Inspiration
 

chapters/0104.md

@@ -22,9 +22,7 @@ For example we can change an element's style on hover, apply a transition, and t
 
 ## Transition properties
 
-When we use a transition on an element, there are all sorts of properties that change how the transition works. We can make it slow or fast, delay it, and even control the rate of change using timing functions. We'll delve into what these mean next week, but here's a nice example of what happens when we combine several transitions:
-
-![Combining transitions (http://in-ni.com/)](images/winnie-min.gif)
+When we use a transition on an element, there are all sorts of properties that change how the transition works. We can make it slow or fast, delay it, and even control the rate of change using timing functions. We'll delve into what these mean in the next chapter.
 
 Another example of combined transitions:
 

chapters/0105.md

@@ -10,8 +10,6 @@ Transitions and animations are similar. Both take the form of a CSS property, an
 
 While transitions are all about smoothing the change from state A to state B, animations are a way to describe multiple steps.
 
-![Transitions: A to B](images/ab-min.gif)
-
 ![Animations: A to B to C](images/abc.png)
 
 Animations are useful for more complex movement in the browser. In the above example, there are 3 states (A, B and C). A transition would only go from A to C while an animation allows us to specify what step B looks like and make sure the animation follows all three steps.
@@ -28,15 +26,11 @@ The "Save" button movement we see on Codepen is a good example of a practical an
 
 It does a great job helping people notice the button.
 
-The effect is made up of a series of `keyframes` that tell the browser to shake the button from left to right. We'll dig more into keyframes in greater depth in week 3.
+The effect is made up of a series of `keyframes` that tell the browser to shake the button from left to right. We'll dig more into keyframes in greater depth in chapter 3.
 
-Another example is the landing page for [Fabric](https://get.fabric.io/), an app building platform from Twitter. CSS Animation is used nicely here to help communicate the modular aspect of Fabric, and establish credibility at the same time:
+We can do so much more with CSS positioning and keyframe animations. For another example check out this CSS-only 3D Mac Plus!
 
-![Fabric hero image animation (https://get.fabric.io/)](images/fabric-min.gif)
-
-Lastly, an example from a conference teaser site I made last year. This is a CSS Mac Plus, created to show off the welcome message on [theWeb.is teaser site](http://theweb.is).
-
-![Mac Plus created using CSS](images/macplus-min.gif)
+![Mac Plus created using CSS (http://codepen.io/donovanh/full/HGqjp/)](images/macplus.png)
 
 This CSS Mac Plus is [available on CodePen](http://codepen.io/donovanh/full/HGqjp/) and here's a [step-by-step guide](https://cssanimation.rocks/macplus/) to building it.
 
@@ -46,9 +40,7 @@ Transitions are when the browser animates from one state to another (A to B). Th
 
 Animations are more involved, and let you create sequences of animations with as many keyframes as you need along the way. They trigger automatically, and can loop.
 
-![Transition vs Animation (https://cssanimation.rocks/transition-vs-animation/)](images/transitions-animations-min.gif)
-
-We'll take some time to work on the animation property soon. In the meantime, do look out for interesting uses of animations online, and [let me know](mailto:donovan@cssanimation.rocks) if you find a good one!
+We'll take some time to work on the animation property later.
 
 ## Homework
 

chapters/0201.md

@@ -33,7 +33,7 @@ Let's see how this looks in action. I've set up a couple of demos. You might fin
 
 ## Example: Button transition
 
-![](images/button-min.gif)
+![Button hover effect (http://codepen.io/donovanh/pen/MYQdZd)](images/button-min.gif)
 
 [Here's a CodePen](http://codepen.io/donovanh/pen/MYQdZd) demonstrating the hover effect. In CodePen, you can make changes to the HTML and CSS and see the results immediately.
 

chapters/0203.md

@@ -2,9 +2,9 @@
 
 The timing function is a description of the rate at which the speed of the transition changes. Animations look lifeless when they occur at a fixed, linear pace. Using timing functions can make transitions more life-like.
 
-For example in this first image the transition uses a `linear` timing function:
+For example, [here is an example of a transition using a `linear` timing function](https://codepen.io/donovanh/pen/vMPgmd). It moves back and forth at an unchanging pace.
 
-![Linear transition](images/linear-min.gif)
+Contrast this to [this example using cubic-bezier timing functions](https://codepen.io/donovanh/pen/Zbjbrx). You'll see quite a big difference!
 
 For this example we're using customised `cubic-bezier` timing function:
 

chapters/0303.md

@@ -36,7 +36,7 @@ We'll make use of this tomorrow when we have multiple animations we want to stay
 
 ## Example: Save button wiggle effect
 
-Remember the "Save" button example from back in week 1? Let's revisit that example and look at how `keyframes` are used along with the `animation` property to create the effect.
+Remember the "Save" button example from back in chapter 1? Let's revisit that example and look at how `keyframes` are used along with the `animation` property to create the effect.
 
 ![Source: http://codepen.io/donovanh/pen/KwEQdQ](images/save_button-min.gif)
 

chapters/0305.md

@@ -4,7 +4,7 @@ We've covered a lot of detail so far! I hope it's making sense.
 
 When learning this, I must admit it took me a while for this animation and keyframe stuff to make sense to me. If it's not clear yet, don't be frustrated. Keep at it, and bit by bit the various tricks of using animation in HTML and CSS will become clear.
 
-In this chapter we're going to take a moment to recap what we learned this week. But first, we'll take a look at that homework challenge!
+In this chapter we're going to take a moment to recap what we learned. But first, we'll take a look at that homework challenge!
 
 ## Homework challenge: Traffic lights
 
@@ -14,7 +14,7 @@ The homework challenge should have been easy. Well, it's easy if you know how. I
 
 ## Recap: Animations
 
-This week we looked at the `animation` property and how it works alongside `keyframes`.
+In this section we looked at the `animation` property and how it works alongside `keyframes`.
 
 ### Like a transition, only different