info/css-animation-101
1
0
Fork 0
mirror of https://github.com/cssanimation/css-animation-101.git synced 2025-08-05 05:37:54 +02:00
Code Issues Releases Wiki Activity

Small tweaks

Browse Source
This commit is contained in:
Donovan Hutchinson
2019-04-28 10:32:38 +01:00
parent 444dce0be2
commit 8cc3c61ad1
2 changed files with 45 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/macplus.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 186 KiB

123
index.html
View File

@@ -4,7 +4,7 @@
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>0000-intro</title>
<title>0101</title>
<style type="text/css">
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
@@ -71,45 +71,46 @@
<li><a href="#cubic-bezier">Cubic-bezier</a></li>
<li><a href="#steps">Steps</a></li>
<li><a href="#more-examples">More examples</a></li>
<li><a href="#homework-7">Homework</a></li>
</ul></li>
<li><a href="#multiple-transitions">Multiple transitions</a><ul>
<li><a href="#example-1-fancy-button">Example 1: Fancy button</a></li>
<li><a href="#example-2-background-reveal">Example 2: Background reveal</a></li>
<li><a href="#multiple-transitions-on-a-single-element">Multiple transitions on a single element</a></li>
<li><a href="#homework-7">Homework</a></li>
<li><a href="#homework-8">Homework</a></li>
</ul></li>
<li><a href="#transitions-and-javascript">Transitions and JavaScript</a><ul>
<li><a href="#add-or-remove-classes">Add or remove classes</a></li>
<li><a href="#controlling-transitions-with-javascript">Controlling transitions with JavaScript</a></li>
<li><a href="#lets-recap">Let’s recap</a></li>
<li><a href="#homework-8">Homework</a></li>
<li><a href="#homework-9">Homework</a></li>
</ul></li>
<li><a href="#animations-in-action">Animations in action</a><ul>
<li><a href="#a-symbiotic-relationship">A symbiotic relationship</a></li>
<li><a href="#the-animation-property">The <code>animation</code> property</a></li>
<li><a href="#keyframes">Keyframes</a></li>
<li><a href="#prefixes">Prefixes</a></li>
<li><a href="#homework-9">Homework</a></li>
<li><a href="#homework-10">Homework</a></li>
</ul></li>
<li><a href="#animation-properties">Animation properties</a><ul>
<li><a href="#using-timing-functions-within-keyframes">Using timing functions within keyframes</a></li>
<li><a href="#homework-10">Homework</a></li>
<li><a href="#homework-11">Homework</a></li>
</ul></li>
<li><a href="#keyframes-in-action">Keyframes in action</a><ul>
<li><a href="#things-to-look-out-for">Things to look out for</a></li>
<li><a href="#example-save-button-wiggle-effect">Example: Save button wiggle effect</a></li>
<li><a href="#homework-11">Homework</a></li>
<li><a href="#homework-12">Homework</a></li>
</ul></li>
<li><a href="#multiple-animations">Multiple animations</a><ul>
<li><a href="#traffic-lights">Traffic lights</a></li>
<li><a href="#further-reading">Further reading</a></li>
<li><a href="#homework-12">Homework</a></li>
<li><a href="#homework-13">Homework</a></li>
</ul></li>
<li><a href="#animation-recap">Animation recap</a><ul>
<li><a href="#homework-challenge-traffic-lights">Homework challenge: Traffic lights</a></li>
<li><a href="#recap-animations">Recap: Animations</a></li>
<li><a href="#putting-them-together">Putting them together</a></li>
<li><a href="#homework-13">Homework</a></li>
<li><a href="#homework-14">Homework</a></li>
</ul></li>
<li><a href="#storytelling">Storytelling</a><ul>
<li><a href="#heroes">Heroes</a></li>
@@ -117,7 +118,7 @@
<li><a href="#part-1-background-animation">Part 1: Background animation</a></li>
<li><a href="#part-2-adding-the-hover-transition">Part 2: Adding the hover transition</a></li>
<li><a href="#summary-1">Summary</a></li>
<li><a href="#homework-14">Homework</a></li>
<li><a href="#homework-15">Homework</a></li>
</ul></li>
<li><a href="#star-wars">Star Wars</a><ul>
<li><a href="#transform-not-an-animation-property">Transform: Not an animation property</a></li>
@@ -126,7 +127,7 @@
<li><a href="#animating-the-star-and-wars">Animating the Star and Wars</a></li>
<li><a href="#making-it-3d">Making it 3D</a></li>
<li><a href="#the-force-awakens">The Force Awakens</a></li>
<li><a href="#homework-15">Homework</a></li>
<li><a href="#homework-16">Homework</a></li>
</ul></li>
<li><a href="#revealing-content-on-scroll">Revealing content on scroll</a><ul>
<li><a href="#wow.js">Wow.js</a></li>
@@ -135,7 +136,7 @@
<li><a href="#hiding-and-showing">Hiding and showing</a></li>
<li><a href="#using-animate.css">Using Animate.css</a></li>
<li><a href="#using-modernizr">Using Modernizr</a></li>
<li><a href="#homework-16">Homework</a></li>
<li><a href="#homework-17">Homework</a></li>
</ul></li>
<li><a href="#accessibility">Accessibility</a><ul>
<li><a href="#make-sure-content-is-accessible">Make sure content is accessible</a></li>
@@ -144,16 +145,14 @@
<li><a href="#confusion">Confusion</a></li>
<li><a href="#dont-make-me-sick">Don’t make me sick</a></li>
<li><a href="#accessibility-is-for-everyones-benefit">Accessibility is for everyone’s benefit</a></li>
<li><a href="#homework-17">Homework</a></li>
<li><a href="#homework-18">Homework</a></li>
</ul></li>
<li><a href="#now-you-know-css-animation">Now you know CSS animation!</a><ul>
<li><a href="#css-animation-cheatsheet">CSS Animation cheatsheet</a></li>
<li><a href="#resources-to-bookmark">Resources to bookmark</a></li>
<li><a href="#other-tools">Other tools</a></li>
<li><a href="#next-steps">Next steps</a></li>
<li><a href="#dont-be-a-stranger-now">Don’t be a stranger, now</a></li>
</ul></li>
<li><a href="#level-up-your-css-animation-skills">Level up your CSS animation skills!</a></li>
</ul>
</nav>
<h1 id="welcome">Welcome</h1>
@@ -164,16 +163,13 @@
<p>I’m delighted you’ve chosen to learn CSS animation. This book is a light and fun introduction to the topic, and I hope you find it helpful. We’re going to learn about CSS <em>transitions</em> and <em>animations</em>. By the end you’ll have a good understanding of CSS animations as well as the tools to create and experiment with our own.</p>
<p>There will be both theory and practical examples. We’ll learn how to easily create your own working environment, and look at lots of examples of animation along the way.</p>
<h2 id="hello-im-donovan">Hello, I’m Donovan</h2>
<figure>
<img src="images/donovan.jpg" alt="Donovan Hutchinson" /><figcaption>Donovan Hutchinson</figcaption>
</figure>
<p>I’ve been writing articles about CSS and other topics for the best part of a decade. I’ve also been designing and developing websites since the late 90’s. More recently, I’ve written for Smashing Magazine, Net Magazine, Tuts+, Adobe Inspire and more. I post random stuff at Hop.ie, and this year I’ve been writing tutorials on <a href="https://cssanimation.rocks">CSSAnimation.rocks</a>, all about advanced and useful animations in the browser.</p>
<p>During my days I work as a designer and front-end developer, and I’m a big fan of combining UX principles with fun animations in design. In the evenings I write blogs and try to make sure I’m aware of what’s happening in the world of web design.</p>
<p>This book is an introduction to the topic of CSS animation, but along the way we’ll cover a lot of material. The goal is to make sure we understand what the <code>transition</code> and <code>animation</code> properties are for, how they work, and see them in action.</p>
<p>By the end of this book you should be confident enough to begin applying animation to your projects.</p>
<h2 id="book-structure">Book structure</h2>
<p>Here’s what we’re going to cover.</p>
<p><strong>First:</strong> What’s animation anyway? This week we’ll look at why we animate. We’ll also introduce the <code>transition</code> and <code>animation</code> properties and some sources of inspiration.</p>
<p><strong>First:</strong> What’s animation anyway? We’ll look at why we animate. We’ll also introduce the <code>transition</code> and <code>animation</code> properties and some sources of inspiration.</p>
<p><strong>Then:</strong> All about the <strong>transition</strong> property. We’ll learn how transitions work, and the properties we can control to change the movement.</p>
<p><strong>After that:</strong> We’ll take on the <strong>animation</strong> property, and learn how to create keyframes that go beyond simple transitions.</p>
<p><strong>Lastly:</strong> Bringing it all together. We’ll put together some advanced examples that make use of both, look into how we can make sure our work is accessible, and share some helpful CSS resources we can apply to projects, and JavaScript tools we can use for more advanced effects.</p>
@@ -215,17 +211,11 @@
<figure>
<img src="images/portal-min.gif" alt="Portal animation (http://hop.ie/portal/)" /><figcaption>Portal animation (http://hop.ie/portal/)</figcaption>
</figure>
<p>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 <a href="http://sprout.is">Sprout</a>:</p>
<figure>
<img src="images/sprout-min.gif" alt="Animated chart from Sprout" /><figcaption>Animated chart from Sprout</figcaption>
</figure>
<p>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.</p>
<h2 id="with-great-power-comes-great-responsibility">With great power comes great responsibility</h2>
<p>It’s easy to do too much with animation. Having too many things moving around on the page at once is distracting. It’s usually a good idea to try to do <em>less</em> animation when possible. Any movement you do add will be all the more powerful.</p>
<p>This might mean only moving a small item on your page. Sometimes it’s ok to do <em>less</em>.</p>
<p>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:</p>
<figure>
<img src="images/ribbon-min.gif" alt="National Parks from Rally Interactive" /><figcaption>National Parks from Rally Interactive</figcaption>
</figure>
<p>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.</p>
<h2 id="inspiration">Inspiration</h2>
<p>Animation has a long and rich history. I recently wrote a post on <a href="https://cssanimation.rocks/principles/">Principles of Animation for the Web</a>. The principles draw from Disney’s 1981 book <a href="http://en.wikipedia.org/wiki/12_basic_principles_of_animation">The Illusion of Life: Disney Animation</a>.</p>
<p>If you want to go further, dig into the <a href="https://www.youtube.com/watch?v=loCiTO8qEMI">Animator’s Survival Kit videos</a>. YouTube is full of sources of inspiration and ideas.</p>
@@ -299,10 +289,7 @@
<img src="images/button.png" alt="Animated button (http://codepen.io/donovanh/pen/MYQdZd)" /><figcaption>Animated button (http://codepen.io/donovanh/pen/MYQdZd)</figcaption>
</figure>
<h2 id="transition-properties">Transition properties</h2>
<p>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:</p>
<figure>
<img src="images/winnie-min.gif" alt="Combining transitions (http://in-ni.com/)" /><figcaption>Combining transitions (http://in-ni.com/)</figcaption>
</figure>
<p>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.</p>
<p>Another example of combined transitions:</p>
<figure>
<img src="images/transitions-min.gif" alt="More transitions (http://codepen.io/suez/pen/XJGOyL)" /><figcaption>More transitions (http://codepen.io/suez/pen/XJGOyL)</figcaption>
@@ -321,9 +308,6 @@
<p>Transitions and animations are similar. Both take the form of a CSS property, and have duration, delay and other ways of controlling how the browser creates the movement.</p>
<p>While transitions are all about smoothing the change from state A to state B, animations are a way to describe multiple steps.</p>
<figure>
<img src="images/ab-min.gif" alt="Transitions: A to B" /><figcaption>Transitions: A to B</figcaption>
</figure>
<figure>
<img src="images/abc.png" alt="Animations: A to B to C" /><figcaption>Animations: A to B to C</figcaption>
</figure>
<p>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.</p>
@@ -335,23 +319,16 @@
<img src="images/save_button-min.gif" alt="Save button on CodePen (http://codepen.io/donovanh/pen/KwEQdQ)" /><figcaption>Save button on CodePen (http://codepen.io/donovanh/pen/KwEQdQ)</figcaption>
</figure>
<p>It does a great job helping people notice the button.</p>
<p>The effect is made up of a series of <code>keyframes</code> that tell the browser to shake the button from left to right. We’ll dig more into keyframes in greater depth in week 3.</p>
<p>Another example is the landing page for <a href="https://get.fabric.io/">Fabric</a>, 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:</p>
<p>The effect is made up of a series of <code>keyframes</code> that tell the browser to shake the button from left to right. We’ll dig more into keyframes in greater depth in chapter 3.</p>
<p>We can do so much more with CSS positioning and keyframe animations. For another example check out this CSS-only 3D Mac Plus!</p>
<figure>
<img src="images/fabric-min.gif" alt="Fabric hero image animation (https://get.fabric.io/)" /><figcaption>Fabric hero image animation (https://get.fabric.io/)</figcaption>
</figure>
<p>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 <a href="http://theweb.is">theWeb.is teaser site</a>.</p>
<figure>
<img src="images/macplus-min.gif" alt="Mac Plus created using CSS" /><figcaption>Mac Plus created using CSS</figcaption>
<img src="images/macplus.png" alt="Mac Plus created using CSS (http://codepen.io/donovanh/full/HGqjp/)" /><figcaption>Mac Plus created using CSS (http://codepen.io/donovanh/full/HGqjp/)</figcaption>
</figure>
<p>This CSS Mac Plus is <a href="http://codepen.io/donovanh/full/HGqjp/">available on CodePen</a> and here’s a <a href="https://cssanimation.rocks/macplus/">step-by-step guide</a> to building it.</p>
<h2 id="transitions-vs.animations">Transitions vs. Animations</h2>
<p>Transitions are when the browser animates from one state to another (A to B). They’re usually triggered by an action such hovering over an element, or adding or removing a class using JavaScript.</p>
<p>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.</p>
<figure>
<img src="images/transitions-animations-min.gif" alt="Transition vs Animation (https://cssanimation.rocks/transition-vs-animation/)" /><figcaption>Transition vs Animation (https://cssanimation.rocks/transition-vs-animation/)</figcaption>
</figure>
<p>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 <a href="mailto:donovan@cssanimation.rocks">let me know</a> if you find a good one!</p>
<p>We’ll take some time to work on the animation property later.</p>
<h2 id="homework-4">Homework</h2>
<p>Can you think of ways animations might be used on your web pages? Keep an eye open for animation when browsing. Look out for when something moves in a way that calls attention to itself. In these cases it’s usually an animation.</p>
<p>If you’ve downloaded the starter HTML and CSS, take a look for the <code>animation</code> property. Unlike transitions, animations need a second part, called <code>keyframes</code>. Try changing some values and see what happens.</p>
@@ -376,7 +353,9 @@ button:hover {
<p>If we applied the transition property to the hover state only, it would only transition <em>to</em> the hover state but not back.</p>
<p>Let’s see how this looks in action. I’ve set up a couple of demos. You might find these examples contain some code that isn’t obvious. I’ll be going into greater detail over the next few days, but do feel free to poke around at the values to see what happens.</p>
<h2 id="example-button-transition">Example: Button transition</h2>
<p><img src="images/button-min.gif" /></p>
<figure>
<img src="images/button-min.gif" alt="Button hover effect (http://codepen.io/donovanh/pen/MYQdZd)" /><figcaption>Button hover effect (http://codepen.io/donovanh/pen/MYQdZd)</figcaption>
</figure>
<p><a href="http://codepen.io/donovanh/pen/MYQdZd">Here’s a CodePen</a> demonstrating the hover effect. In CodePen, you can make changes to the HTML and CSS and see the results immediately.</p>
<p>The important thing to look for is the any property beginning <code>transition-</code>. I’ve written them out long-hand for demonstration like so:</p>
<pre><code>transition-property: all;
@@ -443,10 +422,8 @@ transition-timing-function: linear;</code></pre>
<p>If you’d like to go further, press the “Fork” button to create your own version and you can then save your work to your own Codepen account.</p>
<h1 id="timing-functions">Timing functions</h1>
<p>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.</p>
<p>For example in this first image the transition uses a <code>linear</code> timing function:</p>
<figure>
<img src="images/linear-min.gif" alt="Linear transition" /><figcaption>Linear transition</figcaption>
</figure>
<p>For example, <a href="https://codepen.io/donovanh/pen/vMPgmd">here is an example of a transition using a <code>linear</code> timing function</a>. It moves back and forth at an unchanging pace.</p>
<p>Contrast this to <a href="https://codepen.io/donovanh/pen/Zbjbrx">this example using cubic-bezier timing functions</a>. You’ll see quite a big difference!</p>
<p>For this example we’re using customised <code>cubic-bezier</code> timing function:</p>
<figure>
<img src="images/demo-min.gif" alt="Cubic-bezier timing function" /><figcaption>Cubic-bezier timing function</figcaption>
@@ -503,8 +480,7 @@ transition-timing-function: linear;</code></pre>
transition: all 2s steps(10, end);</code></pre>
<h2 id="more-examples">More examples</h2>
<p>I’ve written on the subject of <a href="https://medium.com/css-tutorials/bouncy-transitions-c0c8085d489">timing functions here</a> if you’d like to read more and see other examples.</p>
## Homework
</h2>
<h2 id="homework-7">Homework</h2>
<p>Following on from <a href="http://codepen.io/donovanh/pen/NPYNGa?editors=110">the previous homework example</a> try changing the <code>transition-timing-function</code> value and see how it changes the way the transition feels.</p>
<p>You can also try changing values on <a href="http://codepen.io/donovanh/pen/GgaRNv">this demo</a>. Technically it’s an animation rather than a transition, but the timing function applies in the same way.</p>
<h1 id="multiple-transitions">Multiple transitions</h1>
@@ -560,7 +536,7 @@ transition: all 2s steps(10, end);</code></pre>
<p>For example:</p>
<pre><code>transition: background 1s ease-out, border 0.5s linear;</code></pre>
<p>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.</p>
<h2 id="homework-7">Homework</h2>
<h2 id="homework-8">Homework</h2>
<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:</p>
<ul>
<li>Example 1: <a href="http://codepen.io/donovanh/pen/YPMGpJ">Fancy button</a></li>
@@ -598,7 +574,7 @@ document.getElementById(&#39;js-show&#39;).style.transition = &#39;opacity 1s ea
<p>Putting these together we can create interesting combinations of effects, and even apply multiple transitions to a single element.</p>
<p>Finally, we wrapped it up today by covering how to apply these transitions using JavaScript.</p>
<p>Transitions are but one part of the CSS Animation puzzle. Next we’ll cover the <code>animation</code> property.</p>
<h2 id="homework-8">Homework</h2>
<h2 id="homework-9">Homework</h2>
<p>Before we start looking at the <code>animation</code> property, take some time to think about how you use transitions.</p>
<p>Can you think of ways they could help smooth the interactions or state changes on your pages? How might they add appeal?</p>
<h1 id="animations-in-action">Animations in action</h1>
@@ -661,7 +637,7 @@ animation-repeat: infinite;</code></pre>
<h2 id="prefixes">Prefixes</h2>
<p>For the moment it’s still necessary to use the <code>-webkit-</code> prefix on the <code>animation</code> property. I won’t add it to examples, but it will be needed for your animations to work in browsers such as Safari.</p>
<p>In CodePen you can use the “Autoprefixer” option within the CSS settings. For local development, I use the Gulp version of Autoprefixer. <a href="http://leaverou.github.io/prefixfree/">Prefix Free</a> is a decent alternative also.</p>
<h2 id="homework-9">Homework</h2>
<h2 id="homework-10">Homework</h2>
<p>Open up <a href="http://codepen.io/donovanh/pen/WbqNwd?editors=110">this 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!</p>
<p>I love seeing how you’re getting on. You can <a href="mailto:donovan@cssanimation.rocks">email me</a> or get in touch <a href="https://twitter.com/donovanh">on Twitter</a>.</p>
<h1 id="animation-properties">Animation properties</h1>
@@ -720,7 +696,7 @@ animation-repeat: infinite;</code></pre>
}
}</code></pre>
<p>In this case the first half of the animation will be linear, and the second half would use the <code>ease-out</code> timing function.</p>
<h2 id="homework-10">Homework</h2>
<h2 id="homework-11">Homework</h2>
<p>I’ve created a simple keyframe animation <a href="http://codepen.io/donovanh/pen/MYMJRd?editors=010">here on CodePen</a>. The properties are listed in the CSS. Try changing some of these properties, and see what happens.</p>
<h1 id="keyframes-in-action">Keyframes in action</h1>
<p>So far we’ve been introduced to the <code>animation</code> properties, and had a chance to see how it relies on <code>keyframes</code>. Next we’ll cover keyframes in greater detail.</p>
@@ -748,7 +724,7 @@ animation-repeat: infinite;</code></pre>
<p>This example will have the element start with an opacity of 0, and stay invisible until 20% through the animation, at which time it will then begin to animate toward an opacity of 1.</p>
<p>We’ll make use of this tomorrow when we have multiple animations we want to stay in sync with each other.</p>
<h2 id="example-save-button-wiggle-effect">Example: Save button wiggle effect</h2>
<p>Remember the “Save” button example from back in week 1? Let’s revisit that example and look at how <code>keyframes</code> are used along with the <code>animation</code> property to create the effect.</p>
<p>Remember the “Save” button example from back in chapter 1? Let’s revisit that example and look at how <code>keyframes</code> are used along with the <code>animation</code> property to create the effect.</p>
<figure>
<img src="images/save_button-min.gif" alt="Source: http://codepen.io/donovanh/pen/KwEQdQ" /><figcaption>Source: http://codepen.io/donovanh/pen/KwEQdQ</figcaption>
</figure>
@@ -790,7 +766,7 @@ animation-repeat: infinite;</code></pre>
</figure>
<p>We can see that the browser creates the in-between steps between each keyframe. Without relying on fancy timing functions, this animation manages to add a lot of character to the button.</p>
<p><a href="http://codepen.io/donovanh/pen/KwEQdQ">Here’s a CodePen</a> showing the Save button wiggle in action.</p>
<h2 id="homework-11">Homework</h2>
<h2 id="homework-12">Homework</h2>
<p>I’ve created <a href="http://codepen.io/donovanh/pen/azgjMz?editors=010">a new CodePen with a single animated element</a>. It makes use of an “animation-timing-function” within the keyframes and has a series of keyframes creating a relatively complex animation.</p>
<p>What happens when you take some frames away? Or change the percentage values? Can you make the cube do something else? See if you can create a feeling of “life” in something so simple!</p>
<h1 id="multiple-animations">Multiple animations</h1>
@@ -859,18 +835,18 @@ animation-repeat: infinite;</code></pre>
<p>We can <a href="http://codepen.io/donovanh/pen/ogRRdR?editors=010">put it all together</a> and see it in action.</p>
<h2 id="further-reading">Further reading</h2>
<p>For more reading on the subject of <code>keyframe</code> syntax, do check out <a href="https://css-tricks.com/snippets/css/keyframe-animation-syntax/">CSS tricks article on the subject</a>.</p>
<h2 id="homework-12">Homework</h2>
<h2 id="homework-13">Homework</h2>
<p>Today’s homework is a challenge. The traffic light example might look strange to you as it follows the UK pattern.</p>
<p>Can you start with <a href="http://codepen.io/donovanh/pen/ogRRdR?editors=010">the traffic light example</a> and change it so that it works more like traffic lights in the USA or elsewhere?</p>
<h1 id="animation-recap">Animation recap</h1>
<p>We’ve covered a lot of detail so far! I hope it’s making sense.</p>
<p>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.</p>
<p>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!</p>
<p>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!</p>
<h2 id="homework-challenge-traffic-lights">Homework challenge: Traffic lights</h2>
<p>The homework challenge should have been easy. Well, it’s easy if you know how. I’ve created an updated version of <a href="http://codepen.io/donovanh/pen/ogRRdR?editors=010">the UK-based traffic light demo</a>, this time changing the sequence to remove the “red + amber” stage.</p>
<p><a href="http://codepen.io/donovanh/pen/vEqbdw?editors=010">See it in action here</a>. I’ve made the colour scheme match what Google suggested American traffic lights look like.</p>
<h2 id="recap-animations">Recap: Animations</h2>
<p>This week we looked at the <code>animation</code> property and how it works alongside <code>keyframes</code>.</p>
<p>In this section we looked at the <code>animation</code> property and how it works alongside <code>keyframes</code>.</p>
<h3 id="like-a-transition-only-different">Like a transition, only different</h3>
<p>While the animation property looks and works in a way that’s similar to <code>transition</code>, it has some subtle differences. While a transition will only occur when an element changes, animations can begin straight away.</p>
<p>Using the various properties, animations can loop a certain number of times (or forever), and can even begin with a negative value for their delay. This starts the animation with it already having progressed.</p>
@@ -896,7 +872,7 @@ animation-repeat: infinite;</code></pre>
@keyframes keyframe-name {
...
}</code></pre>
<h2 id="homework-13">Homework</h2>
<h2 id="homework-14">Homework</h2>
<p>At this point we should be clear on the different between the animation property and the transition property.</p>
<p>Have a look at some of the <a href="http://codepen.io/collection/AxKOdY/">Principles of Animation for the Web</a> examples. Each is made entirely with HTML and CSS, using keyframe animation. Try forking one and see what you can do with it.</p>
<h1 id="storytelling">Storytelling</h1>
@@ -987,7 +963,7 @@ animation-repeat: infinite;</code></pre>
</figure>
<h2 id="summary-1">Summary</h2>
<p>In this chapter we combined both an animation and a transition to create an effect that could be useful for landing pages and product tours. We made use of the <code>animation-play-state</code> to make sure the animation stopped when we wanted it to.</p>
<h2 id="homework-14">Homework</h2>
<h2 id="homework-15">Homework</h2>
<p>Take a moment to think about what we’ve covered so far.</p>
<p>We covered a lot. Combining animations and transitions is a powerful way to bring pages to life.</p>
<p>When thinking about how this can apply to your work, think about how it might be controlled too. When might animation work for your users’ benefit, and when might it work against it? It’s great to know how to animate but even better to know when not to.</p>
@@ -1082,7 +1058,7 @@ animation-repeat: infinite;</code></pre>
<figure>
<img src="images/css-starwars-min.gif" alt="Source: http://codepen.io/donovanh/pen/pJzwEw?editors=110" /><figcaption>Source: http://codepen.io/donovanh/pen/pJzwEw?editors=110</figcaption>
</figure>
<h2 id="homework-15">Homework</h2>
<h2 id="homework-16">Homework</h2>
<p>If you have time I’d encourage you to take a look through the CSS section of the <a href="http://codepen.io/donovanh/pen/pJzwEw?editors=110">CodePen version</a>.</p>
<p>You may notice some “media” queries in the CSS. We use these to resize the example for smaller devices. Try changing some of the animation keyframes, or the <code>transform</code> values to see what happens.</p>
<h1 id="revealing-content-on-scroll">Revealing content on scroll</h1>
@@ -1128,7 +1104,7 @@ animation-repeat: infinite;</code></pre>
<h2 id="using-modernizr">Using Modernizr</h2>
<p>It’s generally a good idea to protect against situations in which we hide content and show it again using JavaScript. People may not have JavaScript enabled or working for some reason or another. A script such as <a href="http://modernizr.com/">Modernizr</a> can be used to handle this. It’ll add a <code>js</code> class to the body of the document, and we can then bring that into our styles.</p>
<p>I’ve included Modernizr in the <a href="http://codepen.io/donovanh/pen/gbVMjm">demo</a>.</p>
<h2 id="homework-16">Homework</h2>
<h2 id="homework-17">Homework</h2>
<p>Making content fade into place is a great start, but what ways can you imagine this being used to add value to your designs and sites? When browsing, look out for times when content seems to start animating as you scroll to it.</p>
<p>When does it work, and when does it not work so well?</p>
<h1 id="accessibility">Accessibility</h1>
@@ -1153,7 +1129,7 @@ animation-repeat: infinite;</code></pre>
<p><a href="http://vestibular.org/understanding-vestibular-disorder">Vestibular.org</a> is a great starting point to learn more about this topic.</p>
<h2 id="accessibility-is-for-everyones-benefit">Accessibility is for everyone’s benefit</h2>
<p>Accessibility isn’t just for people using screen readers or alternative means of browsing our content. We’re all distracted sometimes, network connections drop, we’re checking our phones in a queue at the post office or glancing at directions when driving. We should be aware of the ways people might use what we make and ensure our animations don’t get in the way.</p>
<h2 id="homework-17">Homework</h2>
<h2 id="homework-18">Homework</h2>
<p>If your job involves designing or building interfaces for people to use, do take time to read <a href="http://www.nngroup.com/articles/animation-usability/">NNGroup’s Animation for Attention and Comprehension</a>. Think about how people might use your work, and what it might mean if they couldn’t see the animation.</p>
<h1 id="now-you-know-css-animation">Now you know CSS animation!</h1>
<p>You’ve completed CSS Animation 101! I hope you’ve enjoyed this book.</p>
@@ -1179,18 +1155,10 @@ animation-repeat: infinite;</code></pre>
<h2 id="next-steps">Next steps</h2>
<p>A question some have asked is “what do we do to progress past the 101 stage?”.</p>
<p>My suggestion would be to look for challenges. Look to sites such as <a href="http://dribbble.com">Dribbble.com</a>, or <a href="http://codepen.io">CodePen.io</a> for inspiration. Look for ideas from popular products (I frequently remake Apple designs), movies or TV shows. Wonder, how would I capture that effect on the web? Would CSS be a good way to do it?</p>
<p>I’d also suggest reading some of the posts on <a href="https://css-tricks.com/">CSS Tricks</a>, <a href="http://sarasoueidan.com/articles/index.html">SaraSoueidan.com</a>, and even my own <a href="https://cssanimation.rocks">CSSAnimation.rocks</a> website.</p>
<p>So, if you don’t want this knowledge to fade, practice. Find reasons to use it, and look for what interests you. If you can make it fun, it’ll be all the easier.</p>
<h2 id="dont-be-a-stranger-now">Don’t be a stranger, now</h2>
<p>Have you been inspired to try some CSS animation? <a href="mailto:hello@cssanimation.rocks">Let me know</a> if you want to share something cool, or have any questions. I’ll look forward to hearing how you get on.</p>
<p>You can find me on Twitter, I’m <span class="citation" data-cites="donovanh">[@donovanh]</span>(https://twitter.com/donovanh).</p>
<p>If you want me to send you a sticker, reply to this email and let me know the address to send it to.</p>
<p>Again, congratulations. You did it! Thank you for being part of this course!</p>
<p>Donovan</p>
<p><a href="https://cssanimation.rocks">CSSAnimation.rocks</a> / <span class="citation" data-cites="cssanimation">[@cssanimation]</span>(https://twitter.com/cssanimation)</p>
<h1 id="level-up-your-css-animation-skills">Level up your CSS animation skills!</h1>
<p>I’d also suggest reading some of the posts on <a href="https://css-tricks.com/">CSS Tricks</a>, <a href="http://sarasoueidan.com/articles/">SaraSoueidan.com</a>, and of course <a href="https://cssanimation.rocks">CSSAnimation.rocks</a>.</p>
<p>So, if you don’t want this knowledge to fade, practice. Find reasons to use it, and look for what interests you. If you can make it fun, it’ll be all the easier. # Level up your CSS animation skills!</p>
<p>Congratulations for finishing this introduction to CSS animation! I hope you’ve enjoyed it. Adding animation to your web projects is a great way to make them stand out.</p>
<p>Introducing an essential video course: <a href="http://courses.cssanimation.rocks/p/level-up/">Level Up Your CSS Animation Skills</a></p>
<p>Introducing an essential video course: <a href="http://courses.cssanimation.rocks/">Level Up Your CSS Animation Skills</a></p>
<p>Continue learning how to create amazing animations with over 4 hours of high quality video lessons and lifetime access to all video content, cheatsheets and guides.</p>
<p>You will learn how to:</p>
<ul>
@@ -1203,7 +1171,6 @@ animation-repeat: infinite;</code></pre>
<li>Each with fun examples you can follow along, step by step</li>
</ul>
<p>By the end of the course you’ll have the skills you need to create an impressive animated landing page!</p>
<p>As a <em>reward for finishing this book</em> you can save 35% today with the code <code>BOOK</code> here:</p>
<p>https://courses.cssanimation.rocks/p/level-up/?product_id=901211&amp;code=BOOK</p>
<p>Go to https://courses.cssanimation.rocks/ now to see what you can learn!</p>
</body>
</html>