Chapter 9
In this chapter I learned more about animations! This chapter focused in on how not all animations need to be flashy and that even simple things can grab the users attention. I was also able to see another way how the animation and keyframe syntax work together. A big take away from this chapter is to remember that no matter how simple an animation I create is is, I should always strive to make it as lifelike as possible. Overshooting a target and snapping back into position, as accomplished by the easing function, that was introduced in this chapter, is a classic animation technique that represents how things move in real life. With very little added effort custom easing function can make an animation even cooler than it originally was. In the examples below, the fade and scale animation affects the “hi, everybody!” text in the blue squares. The text does in fact fade in, and it also scales up a little bit. All of that was defined by the from and to keyframes, in the code, with some extra input from the animation declaration where the duration and easing function were specified. Putting all of that together, gave me the animation that is below.