Updating chapter 2

chapters/0203.md

@@ -1,8 +1,8 @@
 # Timing functions
 
-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 and so using timing functions can make transitions more lifelike.
+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 in this first image the transition uses a `linear` timing function:
 
 ![Linear transition](images/linear-min.gif)
 
@@ -22,7 +22,7 @@ If you'd like to play with these in an example, I've set up [a CodePen here](htt
 
 ![Linear](images/linear-example-min.gif)
 
-A linear transition moves at a consistent steady rate from beginning to end. Since there's no curve in the transition, it never accelerates or decelerates. This can be useful if making animations that need a steady movement, like the scenery moving past the background of a train window or a steadily rotating moon.
+A linear transition moves at a steady rate from beginning to end. Since there's no curve in the transition, it never accelerates or decelerates. This can be useful if making animations that need a steady movement, like the scenery moving past the background of a train window or a steadily rotating moon.
 
 ## Ease-in
 
@@ -83,15 +83,10 @@ We can specify which applies when setting the steps:
 
 ## More examples
 
-I've written on the subject of [timing functions here](http://learnsome.co/blog/bouncy/) if you'd like to read more and see other examples.
+I've written on the subject of [timing functions here](https://medium.com/css-tutorials/bouncy-transitions-c0c8085d489) if you'd like to read more and see other examples.
 
-<div class="callout">
+## Homework</h2>
-  <h2>Homework</h2>
 
-  <p>Following on from <a href="http://codepen.io/donovanh/pen/NPYNGa?editors=110">yesterday's example</a> try changing the `transition-timing-function` value and see how it changes the way the transition feels.</p>
+Following on from [the previous homework example](http://codepen.io/donovanh/pen/NPYNGa?editors=110) try changing the `transition-timing-function` value and see how it changes the way the transition feels.
 
-  <p>You can also try changing values on <a href="http://codepen.io/donovanh/pen/GgaRNv">today's demo</a>. Technically it's an animation rather than a transition, but the timing function applies in the same way.</p>
+You can also try changing values on [this demo](http://codepen.io/donovanh/pen/GgaRNv). Technically it's an animation rather than a transition, but the timing function applies in the same way.
-
-  <p>Have a go, see what you can do!</p>
-
-</div>

chapters/0204.md

@@ -1,6 +1,6 @@
 # Multiple transitions
 
-So far we've covered how a transition creates the movement between one state and another. Today we'll see what happens when we apply a single transition to an element with multiple changes, and how to use multiple transitions together to subtly improve our animation.
+So far we've covered how a transition creates the movement between one state and another. Next we'll see what happens when we apply a single transition to an element with multiple changes, and how to use multiple transitions together to subtly improve our animation.
 
 ## Example 1: Fancy button
 
@@ -88,18 +88,13 @@ For example:
 
 The first transition here works on only the background, and the second (after the comma) only applies to the border. This means that a hover state that changes the background would take 1 second and the transition of the border would take 0.5 seconds.
 
-<div class="callout">
+## Homework
-  <h2>Homework</h2>
 
-  <p>Today we looked at how multiple effects could be handled by a single transition, and how multiple transitions can be used together. It's worth take a look at the CodePen examples for each:</p>
+In this chapter we looked at how multiple effects could be handled by a single transition, and how multiple transitions can be used together. It's worth take a look at the CodePen examples for each:
 
-  <ul>
+* Example 1: [Fancy button](http://codepen.io/donovanh/pen/YPMGpJ)
-    <li>Example 1: <a href="http://codepen.io/donovanh/pen/YPMGpJ">Fancy button</a></li>
+* Example 2: [Cat Hover card](http://codepen.io/donovanh/pen/LEvjJg)
-    <li>Example 2: <a href="http://codepen.io/donovanh/pen/LEvjJg">Cat Hover card</a></li>
-  </ul>
 
-  <p>Can you think of ways these sorts of transitions might help in a project you're currently working on?</p>
+Can you think of ways these sorts of transitions might help in a project you're currently working on?
 
-</div>
+We've covered a lot so far. Next we'll take a look at how we can apply these transitions using JavaScript.
-
-We've covered a lot so far this week. Next we'll take a look at how we can apply these transitions using JavaScript.

chapters/0205.md

@@ -41,7 +41,7 @@ Here the `webkitTransition` applies to any browsers that would otherwise use the
 
 ## Let's recap
 
-This week we've covered the `transition` property. We learned we can use this property to tell a browser to animate from one state to another.
+In this chapter we've covered the `transition` property. We learned we can use this property to tell a browser to animate from one state to another.
 
 ![](images/ab.png)
 
@@ -49,15 +49,12 @@ Along the way we've learned about the various properties: duration, delay, and t
 
 Putting these together we can create interesting combinations of effects, and even apply multiple transitions to a single element.
 
-Finally we wrapped it up today by covering how to apply these transitions using JavaScript.
+Finally, we wrapped it up today by covering how to apply these transitions using JavaScript.
 
-Transitions are one part of the CSS Animation puzzle. Next we'll cover the `animation` property.
+Transitions are but one part of the CSS Animation puzzle. Next we'll cover the `animation` property.
 
-<div class="callout">
+## Homework
-  <h2>Homework</h2>
 
-  <p>Before we start looking at the animation property, take some time to think about how you use transitions.</p>
+Before we start looking at the `animation` property, take some time to think about how you use transitions.
 
-  <p>Can you think of ways they could help smooth the interactions or state changes on your pages? How might they add appeal?</p>
+Can you think of ways they could help smooth the interactions or state changes on your pages? How might they add appeal?
-
-</div>

chapters/0301.md

@@ -93,7 +93,8 @@ For the moment it's still necessary to use the `-webkit-` prefix on the `animati
 
 In CodePen you can use the "Autoprefixer" option within the CSS settings. For local development, I use the Gulp version of Autoprefixer. [Prefix Free](http://leaverou.github.io/prefixfree/) is a decent alternative also.
 
-<div class="callout">
+## Homework
-  <h2>Homework</h2>
+
-  <p>Open up <a href="http://codepen.io/donovanh/pen/WbqNwd?editors=110">today's 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! I love seeing how you're getting on. You can [email me](mailto:donovan@cssanimation.rocks) or get in touch [on Twitter](https://twitter.com/donovanh).</p>
+Open up [this keyframes example](http://codepen.io/donovanh/pen/WbqNwd?editors=110) 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!
-</div>
+
+I love seeing how you're getting on. You can [email me](mailto:donovan@cssanimation.rocks) or get in touch [on Twitter](https://twitter.com/donovanh).