diff --git a/chapters/0203.md b/chapters/0203.md index c1fe6d6..0e7242a 100644 --- a/chapters/0203.md +++ b/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:  @@ -22,7 +22,7 @@ If you'd like to play with these in an example, I've set up [a CodePen here](htt  -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. -
Following on from yesterday's example try changing the `transition-timing-function` value and see how it changes the way the transition feels.
+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. -You can also try changing values on today's demo. Technically it's an animation rather than a transition, but the timing function applies in the same way.
- -Have a go, see what you can do!
- -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:
+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: -Can you think of ways these sorts of transitions might help in a project you're currently working on?
+Can you think of ways these sorts of transitions might help in a project you're currently working on? -Before we start looking at the animation property, take some time to think about how you use transitions.
+Before we start looking at the `animation` property, take some time to think about how you use transitions. -Can you think of ways they could help smooth the interactions or state changes on your pages? How might they add appeal?
- -Open up today's keyframes example 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).
-