Motion Design with CSS
Table of Contents
IntroductionRachel Nabors begins her course on web animation by introducing herself and highlighting some of her recent animation projects. Rachel also outlines the scope of the course and talks about the tools she will be using. - webanimationweekly.com
CSS TransitionsCSS transitions describe how a property should display change when given a different value. Transitions specify the targeted property, duration, delay, and the timing function to be used during the transition.
Exercise 1: Rolling a BallIn this first exercise, Rachel demonstrates how to create a rolling ball with multiple CSS transitions.
Transitioning Multiple PropertiesThe easiest way to transition multiple properties is to use “all” as the property to be transitioned. This can have unintended side effects since every property change will be transitioned and each transition will have the same duration. Instead, Rachel demonstrates how to use the transition property to create a comma-delimitated list of transitions - each with their own duration and delay.
Demonstration: Changing the Ball’s ColorRachel spends a few minutes demonstrating how to transition the color of the ball in the previous exercise from one color to another. She also talks briefly about optimizing the animation by adjusting when multiple animations are running.
DurationCiting work by Jakob Nielson, Rachel talks about transition duration and the user’s perceived experience given different delays and durations. For example, 100 milliseconds will appear instantaneous. On the other hand, an animation longer than 10 seconds can leave the user feeling disconnected. After sharing a few example, Rachel gives her recommendations for animation timing.
Browser Developer ToolsRachel introduces the developer tools in both Firefox and Chrome. She demonstrates how they can be used to play, pause, and adjust the speed of animations running in the browser. Rachel will take a more in-depth look at the developer tools later in the course.
Timing FunctionsIn animation, easing or cushioning describes an animation’s rate of change over time. CSS transitions include a transition-timing-function property which allows developers to specify the type of easing to apply to the transition. Rachel uses the websites cubic-bezier.com and easings.net to better demonstrate the various timing functions. - cubic-bezier.com , easings.net
Exercise 2: Applying Physics to the BallIn this exercise, you will use different easing and durations to add physics to the ball animation.
CSS Transitions SummaryRachel wraps up her discussion on CSS transitions by talking about browser support. She also shares a few summarizing points about the advantages of using CSS transitions and answers a few audience questions.
CSS AnimationsCSS animations change one or more CSS properties through the use of keyframes. Keyframes can be specified using the “from” and “to” keywords or by percentages. Changes between keyframes are animated by the browser. After introducing CSS animations, Rachel explains some of the differences between animations and transitions.
Sprite Animation with CSSAn image containing multiple frames or cells of an animation is often referred to as a sprite sheet. Sprite sheets are animated by showing each cell one after another like a flip book. Rachel talks about how the steps() timing function can be used to create a sprite animation with CSS.
Exercise 3: Making a Walk-CycleIn this exercise, you will use a sprite sheet to create a walk-cycle animation.
Exercise 3 SolutionRachel walks through the solution to exercise 3.
Advanced Animation PropertiesRachel talks about a couple properties that can be used to create more advanced animations. The animation-fill-mode property specifies how the element will look before the animation starts or after the animation ends. The animation-play-state can be used to pause or resume the animation. Lastly, the animation-direction indicates the direction in which the animation plays.
Exercise 4: Wag the CatIn this exercise, you will make the cate wag it’s tail using the advanced CSS animation properties.
Exercise 4: SolutionRachel walks through the solution to exercise 4.
CSS Animations SummaryRachel wraps up her discussion on CSS animations by looking at browser support. She also outlines the advantages of CSS animations and answers some audience questions.
Animation in Design
Stateful Transitions & Supplemental AnimationsRachel begins a short section discussing different animation design patterns. Stateful transitions are great for highlighting a change in the task-flow location or indicating where you have been. The entrance animation of a modal dialog would be an example of a stateful transition. Supplemental animations indicate important details that shouldn’t be overlooked or different possibilities presented to the user.
Causal Effects and Decorative AnimationsCausal effects indicate when an action or element has caused something else to happen. For example, a loader or spinner animation indicates when an image or video has begun loading. On the other hand, decorative animations like a button’s hover effect don’t add any value to the content and are typically unnecessary in the overall user experience.
Jump Cuts and In-BetweeningRachel pulls a couple examples from film editing and applies them to user interface design. A jump cut is a sharp transition. Typically there isn’t any animation involved and the result is immediate. “In-betweening” is the technique of adding animation to clue the user into where an element came from and help set the expectations of the user interface.
Drawing AttentionA user’s eyes tend to focus on the center of the page. Animation is a tool to help focus the user’s attention to a specific task at hand. Rachel discusses how to use animation to draw attention. She also cautions that if too many elements are competing for attention, the user may not know where their focus should be.
Animation Design SummaryUsing the band website http://www.alovelikepi.com , Rachel summarizes the various animation design patterns discussed in this section. She also spends a few minutes answering some audience questions.
Static vs. Dynamic AnimationsStatic animations are the easiest to create. An element animates from one state to another. Both states are predetermined and predictable. Dynamic animations, however, are typically triggered by some event or user interaction. The resulting animation could have a different outcome each time it runs. Rachel demonstrates these differences and explains how the combination of static and dynamic animations can lead to stateful animations.
Exercise 5: Sensing Visual Play ReadinessIn this exercise, you will show and hide elements using a .loading class.
Exercise 5 SolutionRachel walks through the solution to exercise 5. She also shares a real-world example where she used CSS classes to manage state.
Exercise 6: Falling up the HoleIn this exercise, you will use the skrollr.js library to make Tuna “fall” up the hole past Alice.
Exercise 6 SolutionRachel walks through the solution to exercise 6.
SequencingAfter answering a couple audience questions, Rachel introduces sequencing or “animation stacking”. Sequencing is the process of putting a delay on the second animation so it won’t run until after the first animation is completed.
Exercise 7: Sitting Tuna DownIn this exercise, you will use the animation-delay property to start a sitting animation after the walking animation finishes.
Exercise 8: Sitting Tuna Down with Event ListenersIn this exercise, you will use the animationend event to add the .sit class after Tuna is done walking.
Exercise 8: SolutionRachel walks through the solution to exercise 8.
CSS TriggersCSS properties that trigger the repainting of the page are the most costly to animation performance. The more repainting, the poorer the performance. Rachel talks about why the opacity and transform properties are best for animations and how they can be used in place for less performant properties.
Exercise 9: Walk the Cat….Again!In this exercise you will find a way to walk the cat without using the expensive background positioning technique.
will-change PropertyThe will-change CSS property will off-load the rendering of animations and transitions to the GPU. This can increase the performance of the animation since their are often more resources on the GPU. While will-change is good for performance, it has limited support across browsers and its overuse can have the reverse affect.
Frames Per SecondRachel explains the affect frame rate has on animation. Frame rate on the computer is different than frame rate on TV because computer animation frames lack motion blur to give the illusion of movement. Because of this, you often need to have computer-based animations run at a higher frame rate.
Paint Flashing and the TimelineTwo more browser developer tools that are useful when auditing performance are Paint Flashing and the Timeline. Paint Flashing displays the regions of the page that are being repainted by the browser. Since repainting can cause performance issues, this helps you identify where the browser’s resources are being used. The timeline allows you capture and analyze a webpage’s loading, scripting, rendering and painting over a period of time.
Course Wrap-up & ResourcesRachel wraps up the course with a brief Q&A with the audience. She also shares a few final resources for better understanding the developer tools and gives the audience a peek at what’s coming next in the Web Animation API.