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

Updating it's

Browse Source
This commit is contained in:
Donovan Hutchinson
2020-11-30 06:34:22 +00:00
parent 8cc3c61ad1
commit 81a038119d
1 changed files with 47 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
index.html
View File

@@ -191,17 +191,17 @@
</blockquote>
<p>Before we get into the technical side of CSS animation, let’s discuss <strong>why</strong> we’re animating in the first place.</p>
<h2 id="more-than-words-alone">More than words alone</h2>
<p>Animation can convey information efficiently, or it can be used to grab attention but in the end it’s all about communication.</p>
<p>Animation can convey information efficiently, or it can be used to grab attention but in the end it is all about communication.</p>
<p>Movement in our designs gives us a more powerful way to communicate. It transcends verbal and written language.</p>
<p>Subtle and appropriate animation can add appeal to our designs and credibility to our work. This happens because as humans we’re used to seeing movement all the time in the “real” world. Bringing some of that life into our work brings the two closer.</p>
<p>As our web browsers continue to improve and better support animation, it’s becoming a more viable option than ever. In many ways animation is as important to web design as the fonts we use and layouts we create.</p>
<p>As our web browsers continue to improve and better support animation, it is becoming a more viable option than ever. In many ways animation is as important to web design as the fonts we use and layouts we create.</p>
<h2 id="what-is-animation-on-the-web">What is animation on the web?</h2>
<p>Animation brings us two main benefits: conveying information and grabbing attention. We can come up with many ways these benefits can help us as we build for the web.</p>
<p>Animation can be subtle, like when the CodePen save button wiggles a little to remind us when we need to save our work:</p>
<figure>
<img src="images/save_button-min.gif" alt="Animated “Save” button (http://codepen.io/donovanh/pen/KwEQdQ)" /><figcaption>Animated “Save” button (http://codepen.io/donovanh/pen/KwEQdQ)</figcaption>
</figure>
<p>We’re very good at spotting movement. It’s something we’ve evolved to do. Adding a little animation here and there can introduce some of that “illusion of life” in a very subtle way.</p>
<p>We’re very good at spotting movement. This is something we have evolved to do. Adding a little animation here and there can introduce some of that “illusion of life” in a very subtle way.</p>
<p>We can also use animation to introduce content to a page:</p>
<figure>
<img src="images/list_item-min.gif" alt="Animating list items (https://cssanimation.rocks/list-items/)" /><figcaption>Animating list items (https://cssanimation.rocks/list-items/)</figcaption>
@@ -213,15 +213,16 @@
</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. 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>
<p>It can be easy to do too much with animation. Having too many things moving around on the page at once is distracting.</p>
<p>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 is better 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. Just stop when your viewers need 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>
<p>For loads of great examples, take some time to browse <a href="http://hoverstat.es/">Hover States</a>. This site features all sorts of interesting examples of animation from the web. <a href="https://dribbble.com/">Dribbble.com</a> is helpful also.</p>
<p>For example, here’s a nice example from Dribbble showing <a href="https://dribbble.com/shots/1621920-Google-Material-Design-Free-AE-Project-File">Google’s Material Design principles</a>. Searching for “animation” is a great way to find inspiring ideas.</p>
<p>I also regularly check up on what’s happening at <a href="https://codepen.io">CodePen</a>. It’s a great source of canvas and web animation examples.</p>
<p>I also regularly check up on what’s happening at <a href="https://codepen.io">CodePen</a>. A great source of canvas and web animation examples.</p>
<h2 id="summary">Summary</h2>
<ul>
<li>Animation is kind of a big deal</li>
@@ -232,17 +233,17 @@
</ul>
<h2 id="homework-1">Homework</h2>
<p>Think about your own work and how animation might help.</p>
<p>It’s tempting to go crazy and animate all the things, but try to look for ways subtle animation might better <em>help</em> your visitors understand the content. Is there a call-to-action on your page people are missing? Is there a sudden change in your page that’s happening too suddenly, and could benefit from a smoother transition?</p>
<p>Try not to go crazy and animate all the things. Look for ways subtle animation might better <em>help</em> your visitors understand the content. Is there a call-to-action on your page people are missing? Is there a sudden change in your page that’s happening too suddenly, and could benefit from a smoother transition?</p>
<p>Lastly, take a look at sites like <a href="http://hoverstat.es/">Hover States</a> and <a href="http://littlebigdetails.com/">Little Big Details</a> and <a href="https://dribbble.com/">Dribbble</a>. These sorts of sites help if you’re ever stuck for ideas.</p>
<h1 id="creative-environments">Creative environments</h1>
<blockquote>
<p>“You don’t learn to walk by following rules. You learn by doing, and by falling over.” Richard Branson</p>
</blockquote>
<p>Today we’re going to look at ways we can build and see our CSS animations in the browser. Before we get started with the coding, it’s a good idea to have a workflow that makes it easy to get started.</p>
<p>Today we’re going to look at ways we can build and see our CSS animations in the browser. Before we get started with the coding, we want to create a workflow that makes it easy to get started.</p>
<p>We’ll cover two ways of doing this: developing in the browser, and developing offline (locally).</p>
<h2 id="in-the-browser">In the browser</h2>
<p>The simplest way to get going for small experiments is to develop online. A site I often use is <a href="Codepen.io">CodePen</a>. Another good one is <a href="http://jsfiddle.net/">JS Fiddle</a>.</p>
<p>For the rest of this course I’ll be using <a href="http://codepen.io">CodePen</a> for examples and it’s worth being familiar with the way it works.</p>
<p>The simplest way to get going for small experiments is to develop online. A site I often use is <a href="https://codepen.io">CodePen</a>. Another good one is <a href="http://jsfiddle.net/">JS Fiddle</a>.</p>
<p>For the rest of this course I’ll be using <a href="https://codepen.io">CodePen</a> for examples and it can be worth being familiar with the way it works.</p>
<p>CodePen is a coding playground that involves an edit mode where you can make changes to HTML, CSS and JavaScript and see the results immediately. The screen is divided up into four areas. The preview content, the HTML area, CSS and JavaScript. Within each is a settings option that allows you to configure languages (Sass instead of CSS for example) and other cool stuff.</p>
<h2 id="local-development">Local development</h2>
<p>For more involved projects, I prefer to develop offline. There are ways to do so that can be efficient and quicker than working in the browser.</p>
@@ -257,14 +258,14 @@
<p>Personally I’d recommend trying to get to grips with the code. Understanding the way the CSS works will help when it comes to fixing issues, or creating more expressive effects that visual tools can provide.</p>
<h3 id="gulp">Gulp</h3>
<p>If you’re familiar with Github, Node and checking out code, you might want to set up a development enviroment on your own machine.</p>
<p>I am a big fan of Gulp. Being Node-based, it’s very fast. Modules can be put together to process Sass into CSS, autoprefix for browser support and sync browsers so that you don’t need to keep refreshing each time you update the code.</p>
<p>I am a big fan of Gulp. It is Node-based and very fast. Modules can be put together to process Sass into CSS, autoprefix for browser support and sync browsers so that you don’t need to keep refreshing each time you update the code.</p>
<p>If you’ve used Grunt or other build tools, the process should be familiar.</p>
<p>I’ve created <a href="https://github.com/cssanimation/gulp-sass-starter">a Github repo</a> to make local development faster. If you’re comfortable with using Git, go ahead and <a href="https://github.com/cssanimation/gulp-sass-starter/blob/master/README.md">follow the readme</a> for setup instructions.</p>
<p>Do improve it if you wish and push the results back. Teamwork!</p>
<h2 id="in-summary">In summary</h2>
<p>As you learn CSS animation, feel free to try different ways to create your code. You might want to host it yourself, or you might prefer to use CodePen. Either is good. Make sure you can get from idea to code as smoothly as you need to.</p>
<h2 id="homework-2">Homework</h2>
<p>Register with <a href="http://codepen.io">CodePen</a>. Have a go adding some HTML and CSS, and see how the results change in response. It’s also a good idea to check out some of the featured CodePens on the home page, and see how it’s done.</p>
<p>Register with <a href="http://codepen.io">CodePen</a>. Have a go adding some HTML and CSS, and see how the results change in response. Check out some of the featured CodePens on the home page.</p>
<p><em>Optional:</em> If you want to try local development, download local starting files:</p>
<ul>
<li>Basic option: <a href="https://github.com/cssanimation/starter/archive/master.zip">Project starter HTML/CSS files</a></li>
@@ -284,7 +285,7 @@
<figure>
<img src="images/ab_animated.png" alt="Animated transition from A to B (http://codepen.io/donovanh/pen/RNdxqw)" /><figcaption>Animated transition from A to B (http://codepen.io/donovanh/pen/RNdxqw)</figcaption>
</figure>
<p>For example we can change an element’s style on hover, apply a transition, and the browser will create a smooth animation between the element’s starting style and it’s new style.</p>
<p>For example we can change an element’s style on hover, apply a transition, and the browser will create a smooth animation between the element’s starting style and its new style.</p>
<figure>
<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>
@@ -298,7 +299,7 @@
<h2 id="in-summary-1">In summary</h2>
<p>A transition is the change from one state to another. For example, when hovering over an element, its style might change. Transitions allow the change to become a smooth animation.</p>
<h2 id="homework-3">Homework</h2>
<p>How’s your creative environment looking? How about taking a look into the code, and looking for the <code>transition</code> property in the CSS. Can you see what it’s doing?</p>
<p>How’s your creative environment looking? How about taking a look into the code, and looking for the <code>transition</code> property in the CSS. Can you see what is happening?</p>
<p>Next time you’re browsing the web, look for examples of transitions as you navigate web pages. Look for interesting changes such as when a new element is added to a page, or you hover over a button. You’ll find the web is full of subtle animation once you start looking for it.</p>
<p><strong>Next:</strong> An overview of the <code>animation</code> property and how it differs from <code>transition</code>.</p>
<h1 id="animations">Animations</h1>
@@ -330,10 +331,10 @@
<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>
<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>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 means 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>
<h1 id="transitions-in-action">Transitions in action</h1>
<p>Now that we have introduced the <code>transition</code> and <code>animation</code> properties, it’s time to delve further into transitions and see some code!</p>
<p>Now that we have introduced the <code>transition</code> and <code>animation</code> properties, lets delve further into transitions and see some code!</p>
<h2 id="transitions-2">Transitions</h2>
<p>Transitions take place in the browser when an element changes from one state to another. The browser draws the frames between each state automatically to create movement.</p>
<p>A <code>transition</code> is a property in CSS. Just as you’d give an element a height, width, or border, we give elements transitions too.</p>
@@ -368,7 +369,7 @@ transition-timing-function: ease-out;</code></pre>
<p>The cubic bezier timing function is a lot of fun. We’ll cover timing functions in more detail on another day.</p>
<h2 id="prefixes-and-browser-compatibility">Prefixes and browser compatibility</h2>
<p>When I’ve given code examples, I’ve not included vendor prefixes. This is to make the code easier to read, but if you’re using the code in production they are needed.</p>
<p>I like to use Autoprefixer (it’s an option on Codepen, press the settings “cog” icon in the CSS section), and can be run with build tools such as Grunt or Gulp. Alternately you can manually write them out like this:</p>
<p>I like to use Autoprefixer (this is an option on Codepen: press the settings “cog” icon in the CSS section), and can be run with build tools such as Grunt or Gulp. Alternately you can manually write them out like this:</p>
<pre><code>-webkit-transition: ...;
-moz-transition: ...;
transition: ...;</code></pre>
@@ -397,16 +398,16 @@ transition-delay: 1s;
transition-timing-function: linear;</code></pre>
<p>Let’s look at each of these properties.</p>
<h3 id="transition-property">transition-property</h3>
<p>Usually stated first in the shorthand, this is the property that the browser will animate. To change the background for example, <code>background</code> could be used. It’s also possible to use <code>all</code> to have all applicable CSS properties transition.</p>
<p>Usually stated first in the shorthand, this is the property that the browser will animate. To change the background for example, <code>background</code> could be used. You can use <code>all</code> to have all applicable CSS properties transition.</p>
<h3 id="transition-duration">transition-duration</h3>
<p>A <code>transition-duration</code> value tells the browser how long the transition will take. A transition-duration of 3s (three seconds) will be three times longer than a transition-duration of 1000ms.</p>
<h3 id="transition-delay">transition-delay</h3>
<p>The <code>transition-delay</code> property tells the browser to wait before applying the transition. This is a time value, and it can be specified in seconds or milliseconds. For example, <code>3s</code> would be three seconds and <code>100ms</code> would be one hundred milliseconds. Equally, you could write that as <code>0.1s</code>. It’s up to you.</p>
<p>The <code>transition-delay</code> property tells the browser to wait before applying the transition. This is a time value, and it can be specified in seconds or milliseconds. For example, <code>3s</code> would be three seconds and <code>100ms</code> would be one hundred milliseconds. Equally, you could write that as <code>0.1s</code>. Up to you.</p>
<h3 id="transition-timing-function">transition-timing-function</h3>
<p>Both transitions and animations make use of timing functions. There’s a lot to these, so rather then try to cram it in here, we’ll talk more about timing functions tomorrow. Timing functions can really add life to your animations.</p>
<h2 id="things-transitions-dont-work-on">Things transitions <em>don’t</em> work on</h2>
<p>While you can use transitions on positioning, size, colour, border, background-position and many others, there are some that cannot be transitioned. The font-family cannot be transitioned, as this would mean trying to generate frames between two very different font images.</p>
<p>Background images created with CSS, such as generated gradients, cannot have their properties animated. This would mean the browser recreating the background image with each frame of animation, so it’s not supported.</p>
<p>Background images created with CSS, such as generated gradients, cannot have their properties animated. This would mean the browser recreating the background image with each frame of animation and so is not supported.</p>
<p>However you <em>can</em> animate things like opacity and background position. By moving background images around or hiding them you can create interesting effects.</p>
<p>See it in action on this <a href="http://cssanimation.rocks/baymax/">Baymax example</a> where a background image is moved to create the animation.</p>
<figure>
@@ -418,8 +419,8 @@ transition-timing-function: linear;</code></pre>
</figure>
<h2 id="homework-6">Homework</h2>
<p>I’ve created <a href="http://codepen.io/donovanh/pen/NPYNGa?editors=110">a basic Codepen</a> to try out transitions.</p>
<p>At the moment it’s set up to transition from a diamond shape into a circle. Try changing some of the attributes, to see what happens.</p>
<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>
<p>At the moment there a transition from a diamond shape into a circle. Try changing some of the attributes, to see what happens.</p>
<p>If you would 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, <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>
@@ -464,8 +465,8 @@ transition-timing-function: linear;</code></pre>
<figure>
<img src="images/cubic-bezier-graph.png" alt="Source: http://cubic-bezier.com/#1,-0.49,.13,1.09" /><figcaption>Source: http://cubic-bezier.com/#1,-0.49,.13,1.09</figcaption>
</figure>
<p>Rather than create these by hand, I use <a href="http://cubic-bezier.com">cubic-bezier.com</a>. It’s a great way to create some interesting effects.</p>
<p>They really get fun when using values greater than 1. It’s possible to create transitions that overshoot, and bounce back.</p>
<p>Rather than create these by hand, I use <a href="http://cubic-bezier.com">cubic-bezier.com</a>. A great way to create some interesting effects.</p>
<p>They really get fun when using values greater than 1. This will create transitions that overshoot and bounce back.</p>
<h2 id="steps">Steps</h2>
<figure>
<img src="images/steps-min.gif" alt="Steps" /><figcaption>Steps</figcaption>
@@ -482,7 +483,7 @@ transition: all 2s steps(10, end);</code></pre>
<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>
<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>
<p>You can also try changing values on <a href="http://codepen.io/donovanh/pen/GgaRNv">this demo</a>. Technically this is an animation rather than a transition but the timing function applies in the same way.</p>
<h1 id="multiple-transitions">Multiple transitions</h1>
<p>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.</p>
<h2 id="example-1-fancy-button">Example 1: Fancy button</h2>
@@ -531,13 +532,13 @@ transition: all 2s steps(10, end);</code></pre>
<p>You can also <a href="http://codepen.io/donovanh/pen/LEvjJg">see this example on CodePen</a>.</p>
<h2 id="multiple-transitions-on-a-single-element">Multiple transitions on a single element</h2>
<p>As well as using multiple transitions on multiple elements, we can also use more than one transition on a single element.</p>
<p>A case for this is when you need an element’s background to change separately from it’s border. Applying a single transition to all properties might be too crude for both.</p>
<p>A case for this is when you need an element’s background to change separately from its border. Applying a single transition to all properties might be too crude for both.</p>
<p>We can achieve this by combining multiple transitions into a single declaration. Multiple transitions are separated by commas.</p>
<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-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>
<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. 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>
<li>Example 2: <a href="http://codepen.io/donovanh/pen/LEvjJg">Cat Hover card</a></li>
@@ -635,7 +636,7 @@ animation-repeat: infinite;</code></pre>
<p><img src="images/simple-keyframes-alternating-min.gif" /></p>
<p>In this case I’ve changed the animation-direction property to <code>alternate</code>. See it <a href="http://codepen.io/donovanh/pen/NPZqej">on CodePen here</a>.</p>
<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>While this is becomeing less important, you may want 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-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>
@@ -646,7 +647,7 @@ animation-repeat: infinite;</code></pre>
<h3 id="animation-delay">animation-delay</h3>
<p>Similar to <code>transition-delay</code>, we can use this property to make the animation wait before starting. This can be particularly useful in situations where there are multiple animations taking place.</p>
<p>If the animation loops, the delay does not apply each time it loops. The delay only applies to when the animation is applied to the element.</p>
<p>It’s actually possible to give this property a negative value, such as <code>-1s</code>. This would cause the animation to start as if a second has already elapsed.</p>
<p>You can give this property a negative value such as <code>-1s</code>. This would cause the animation to start as if a second has already elapsed.</p>
<h3 id="animation-direction">animation-direction</h3>
<p>Animations normally begin at 0% and finish at 100%. Using <code>animation-direction</code> we use the values <code>normal</code>, <code>reverse</code>, <code>alternate</code> and <code>alternate-reverse</code> to control the direction.</p>
<p>“Reverse” causes it to play (and loop) from 100% to 0%, while “alternate” plays from 0% to 100% and back again to 0%.</p>
@@ -682,7 +683,7 @@ animation-repeat: infinite;</code></pre>
<p>This can be tricky to work with. Often when creating keyframe animations I’ll choose the <code>linear</code> timing function and handle the way the animation is paced using <code>keyframes</code>.</p>
<p>Having said that, <code>cubic-bezier</code> timing functions can create some great effects when used with animations, so have a go.</p>
<h2 id="using-timing-functions-within-keyframes">Using timing functions within keyframes</h2>
<p>It’s worth noting that when you specify a timing function for an animation, the timing function applies to <em>each keyframe</em> of the animation.</p>
<p>When you specify a timing function for an animation, the timing function applies to <em>each keyframe</em> of the animation.</p>
<p>This means that if you were to specify four keyframes, the timing function would apply to each. An ease-out function would slow down as it approached each keyframe.</p>
<p>For that reason we would usually define the timing function for animations as linear, and control the pacing on a per-keyframe basis:</p>
<pre><code>@keyframes my-animation {
@@ -803,7 +804,7 @@ animation-repeat: infinite;</code></pre>
background: black;
}
}</code></pre>
<p>I’ve added a 2% gap at the beginning and had the third part of the animation begin at 42% as this adds a little bit of a fade to the way the traffic light appears. It’s the subtle stuff that makes all the difference.</p>
<p>I’ve added a 2% gap at the beginning and had the third part of the animation begin at 42% as this adds a little bit of a fade to the way the traffic light appears. The subtle stuff that makes all the difference.</p>
<p>With the red light done, we look at the amber light on the grid.</p>
<p>The amber light is off at the beginning, on for one chunk, then off for two chunks, and finally on again. The <code>keyframes</code> for this light:</p>
<pre><code>@keyframes amber {
@@ -839,11 +840,11 @@ animation-repeat: infinite;</code></pre>
<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>We’ve covered a lot of detail so far! I hope things are 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 is not clear yet, try not to becoe 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. 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>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>In this section we looked at the <code>animation</code> property and how it works alongside <code>keyframes</code>.</p>
@@ -858,7 +859,7 @@ animation-repeat: infinite;</code></pre>
<p>Every animation needs to reference a set of <code>keyframes</code>. These keyframes are a series of percentages, describing each “stage” of the animation. The browser fills in the gaps automatically.</p>
<p>Keyframes have their own shorthand (<em>to</em> and <em>from</em>) when you want to only go from one state to another.</p>
<p>Stacking percentages beside each other can have the animation “pause” at that stage.</p>
<p>Lastly, it’s possible to omit the 0% keyframe and the browser will take the element’s style as implied. For example, to have something fade away, we don’t necessarily have to give it a starting <code>opacity</code> of 1 (assuming the element is already visible):</p>
<p>Lastly, you can omit the 0% keyframe and the browser will take the element’s style as implied. For example, to have something fade away, we don’t necessarily have to give it a starting <code>opacity</code> of 1 (assuming the element is already visible):</p>
<pre><code>@keyframes name {
100% {
opacity: 0;
@@ -936,7 +937,7 @@ animation-repeat: infinite;</code></pre>
<p>This CSS is applying the a set of keyframes called “scroll”, telling it to take 5 seconds, run forever and use a <code>cubic-bezier</code> timing function. In this case the cubic bezier function gives the animation the bounciness as without it the movement would look less lifelike.</p>
<p>I generated this bezier over on <a href="http://cubic-bezier.com/#.52,-0.39,.3,1.43">cubic-bezier.com</a>. If you haven’t bookmarked that site yet, I’d absolutely recommend you do!</p>
<h2 id="part-2-adding-the-hover-transition">Part 2: Adding the hover transition</h2>
<p>It’s a good idea to pause or stop an animation once it’s finished or when you want people to concentrate on something else. Constant animation can be distracting, so let’s make use of <code>animation-play-state</code> to pause the animation when on hover.</p>
<p>It can be a good idea to pause or stop an animation once it has finished or when you want people to concentrate on something else. Constant animation can be distracting, so let’s make use of <code>animation-play-state</code> to pause the animation when on hover.</p>
<pre><code>.screen:hover {
animation-play-state: paused;
}</code></pre>
@@ -966,7 +967,7 @@ animation-repeat: infinite;</code></pre>
<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>
<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? While it is great to know how to animate it can be even better to know when not to.</p>
<h1 id="star-wars">Star Wars</h1>
<p>Get out the popcorn! In this chapter we’ll have some fun making an SVG animation. We will be building the Star Wars movie title from the “The Force Awakens” trailer.</p>
<figure>
@@ -1066,7 +1067,7 @@ animation-repeat: infinite;</code></pre>
<p>Here’s <a href="http://codepen.io/donovanh/pen/gbVMjm">today’s demo on CodePen</a>. Try scrolling down the page, and see how the quotes and cats fade into place.</p>
<h2 id="wow.js">Wow.js</h2>
<p>Many sites trigger custom animations when you scroll to a certain point. They could start playing a video, trigger a complex keyframe animation, or just have items fade into place to draw attention to them.</p>
<p>In each case, what’s happening is that there’s some JavaScript that adds a class to an element when it’s visible on screen. We can then attach animations to the class, so that the browser scrolling results in the animation starting at the right time.</p>
<p>In each case, what’s happening is that there’s some JavaScript that adds a class to an element when it is visible on screen. We can then attach animations to the class, so that the browser scrolling results in the animation starting at the right time.</p>
<p>There are many JavaScript options that add classes, and one I’ve found easy to use is <a href="http://mynameismatthieu.com/WOW/">Wow.js</a>. Let’s use it to create a simple example where content fades into view as we scroll.</p>
<p><img src="images/scroll-min.gif" alt="Source: http://codepen.io/donovanh/pen/gbVMjm" />&quot;&gt;</p>
<h2 id="using-wow.js">Using Wow.js</h2>
@@ -1097,12 +1098,12 @@ animation-repeat: infinite;</code></pre>
}</code></pre>
<p>We should now have a situation where items will fade in as the user scrolls! <a href="http://codepen.io/donovanh/pen/gbVMjm">See it in action on the demo</a>.</p>
<h2 id="using-animate.css">Using Animate.css</h2>
<p>Wow.js has been designed to work well with the CSS framework <a href="http://daneden.github.io/animate.css/">Animate.css</a>. I’ve not used in this example yet as it’s good to understand how to create our own transitions, but it’s worth looking at some of the transitions Animate.css gives us out of the box.</p>
<p>Wow.js has been designed to work well with the CSS framework <a href="http://daneden.github.io/animate.css/">Animate.css</a>. I’ve not used in this example yet as it helps to understand how to create our own transitions. It can be worth looking at some of the transitions Animate.css gives us out of the box.</p>
<p>In <a href="http://codepen.io/donovanh/pen/xbvOQK">this example</a> I’ve used Animate.css. Note how there are no animations or transitions in the CSS. Instead, I’ve added a class to the HTML to tell Animate.css which animation to apply:</p>
<pre><code>&lt;section class=&quot;image wow bounceInUp&quot;&gt;</code></pre>
<p>The class <code>bounceInUp</code> is a reference to one of Animate.css’s many built in animations. If you select the “cog” on the CSS section in the demo, you’ll see that I’ve referenced the Animate.css framework under “External CSS file”.</p>
<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 find it is 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-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>
@@ -1119,11 +1120,11 @@ animation-repeat: infinite;</code></pre>
<h2 id="allow-for-alternate-inputs">Allow for alternate inputs</h2>
<p>A growing percentage of your visitors will be using phones. When on a phone, there is no cursor and no hover state. We need to design around this. One option I often use is to detect a tap and add an “active” class to the target. I then add transitions or animations to both the <code>:hover</code> as well as the <code>.active</code> states.</p>
<h2 id="confusion">Confusion</h2>
<p>Sometimes websites go too far and try to animate <em>all the things</em>. This doesn’t just muddy the site’s message, it can cause confusion. This is especially true of UI. When adding animation to elements on the page that visitors interact with, make sure that it’s obvious <em>why</em> the animation has been triggered. Your visitors don’t have time to decipher complexity in either the visual design or the way it moves, so try to be clear.</p>
<p>Sometimes websites go too far and try to animate <em>all the things</em>. This doesn’t just muddy the site’s message, it can cause confusion. This is especially true of UI. When adding animation to elements on the page that visitors interact with, make sure that it is obvious <em>why</em> the animation has been triggered. Your visitors don’t have time to decipher complexity in either the visual design or the way it moves, so try to be clear.</p>
<h2 id="dont-make-me-sick">Don’t make me sick</h2>
<p>Too much animation, or the wrong kind of animation, can make people feel sick.</p>
<p>When Apple introduced iOS7, an updated operating system for their phone, it brought with it a lot more motion and animation. Some of this was <a href="http://reverttosaved.com/2013/09/28/why-ios-7-is-making-some-users-sick/">enough to make people sick</a>. Some people, like myself, struggle to read in a car or bus as the motion makes us feel ill, and others can’t play certain video games for more than a few minutes at a time.</p>
<p>The reason this happens is down to the way our <a href="https://www.youtube.com/watch?v=dSHnGO9qGsE">vestibular system</a> works. We have 3 tubes in our ears that help us determine where our head is in 3D space. It’s possible to trick our minds into thinking we’re moving, and then when the vestibular system doesn’t echo the movement, our brains get confused and we feel ill.</p>
<p>The reason this happens is down to the way our <a href="https://www.youtube.com/watch?v=dSHnGO9qGsE">vestibular system</a> works. We have 3 tubes in our ears that help us determine where our head is in 3D space. We can trick our minds into thinking we’re moving, but then when the vestibular system doesn’t echo the movement our brains get confused and we feel ill.</p>
<p>That we get sick is an evolutionary side effect. Throwing up is a complex thing, and we have a special part of our brains dedicated to handling it. As it happens, this part of the brain is located near the part that deals with balance, and so we feel ill.</p>
<p>This is something that could become more of an issue as we begin to see more wearable technology. When designing larger animations, be sure to test whether people are comfortable with the types of motion in place.</p>
<p><a href="http://vestibular.org/understanding-vestibular-disorder">Vestibular.org</a> is a great starting point to learn more about this topic.</p>
@@ -1137,15 +1138,15 @@ animation-repeat: infinite;</code></pre>
<h2 id="css-animation-cheatsheet">CSS Animation cheatsheet</h2>
<p>I’ve prepared a <a href="https://cssanimation.rocks/cheatsheets/transitions_animations.pdf">transitions and animations cheat sheet (PDF)</a> that sums up the various properties of each. It is designed to fit onto one A4 page. Enjoy!</p>
<h2 id="resources-to-bookmark">Resources to bookmark</h2>
<p>It’s good to know how to create our own CSS animations and transitions, but sometimes it’s handy to build on existing platforms. Here are some great tools that we can use to save time and get the result we want quickly.</p>
<p>While it is good to know how to create our own CSS animations and transitions, it can also be good to build on existing platforms. Here are some great tools that we can use to save time and get the result we want quickly.</p>
<h3 id="animate.css"><a href="http://daneden.github.io/animate.css/">Animate.css</a></h3>
<p>Animate.css describes itself as “just add water” CSS animations. You can reference the CSS file and add any of the Animate classes to see them come to life. Here’s an <a href="http://codepen.io/donovanh/pen/xbvOQK">example using Animate.css</a>.</p>
<h3 id="hover.css"><a href="http://ianlunn.github.io/Hover/">Hover.css</a></h3>
<p>A nice alternative to Animate.css, Hover.css is another wide variety of ready to use animations that you can apply to links, buttons, logos or any other HTML element.</p>
<h2 id="other-tools">Other tools</h2>
<p>CSS animation is pretty powerful, and can achieve a lot without needing to resort to other technology such as JavaScript. However it’s not the right tool for all situations. Sometimes there’s a need for more complex animations, and JavaScript can help take things further. The best packages build on CSS to make use of its speed and browser support, but let you do more.</p>
<p>CSS animation is pretty powerful, and can achieve a lot without needing to resort to other technology such as JavaScript. However it is not always the right tool for all situations. Sometimes there can be a need for more complex animations, and JavaScript can help take things further. The best packages build on CSS to make use of its speed and browser support, but let you do more.</p>
<h3 id="gsap"><a href="http://greensock.com/gsap">GSAP</a></h3>
<p>Greensock Animation Platform is a JavaScript-based method of creating more advanced animations and offers fine control and great performance. There’s a bit of a learning curve but it’s a powerful tool.</p>
<p>Greensock Animation Platform is a JavaScript-based method of creating more advanced animations and offers fine control and great performance. There’s a bit of a learning curve but it is a powerful tool.</p>
<h3 id="snabbt.js"><a href="http://daniel-lundin.github.io/snabbt.js/">Snabbt.js</a></h3>
<p>Snabbt is a powerful and elegant way to create more complex animation using custom timing functions. It generates transform matrices for the browser to animate, resulting in very good performance.</p>
<h3 id="css-animate"><a href="http://cssanimate.com/">CSS Animate</a></h3>