Browse files

Setting up initial files

  • Loading branch information...
Donovan Hutchinson
Donovan Hutchinson committed Nov 24, 2018
0 parents commit 13036e67ab8b2ddeff92cf2afa41ea877a6b6e76
Showing with 2,016 additions and 0 deletions.
  1. +3 −0 .gitignore
  2. +39 −0 Makefile
  3. +15 −0
  4. +53 −0 chapters/
  5. +78 −0 chapters/
  6. +61 −0 chapters/
  7. +45 −0 chapters/
  8. +57 −0 chapters/
  9. +73 −0 chapters/
  10. +73 −0 chapters/
  11. +97 −0 chapters/
  12. +105 −0 chapters/
  13. +63 −0 chapters/
  14. +99 −0 chapters/
  15. +95 −0 chapters/
  16. +95 −0 chapters/
  17. +92 −0 chapters/
  18. +66 −0 chapters/
  19. +130 −0 chapters/
  20. +137 −0 chapters/
  21. +83 −0 chapters/
  22. +48 −0 chapters/
  23. +72 −0 chapters/
  24. +3 −0 chapters/
  25. BIN images/ab-min.gif
  26. BIN images/ab.gif
  27. BIN images/ab.jpg
  28. BIN images/ab.png
  29. BIN images/ab_animated.png
  30. BIN images/abc.png
  31. BIN images/animators_survival_kit_frame.jpg
  32. BIN images/baymax-min.gif
  33. BIN images/baymax.gif
  34. BIN images/baymax.png
  35. BIN images/button-element-positioning.png
  36. BIN images/button-element-positioning2.png
  37. BIN images/button-min.gif
  38. BIN images/button.gif
  39. BIN images/button.png
  40. BIN images/cat-min.gif
  41. BIN images/cat.gif
  42. BIN images/cat.png
  43. BIN images/change-background-min.gif
  44. BIN images/change-background.gif
  45. BIN images/change-background.png
  46. BIN images/course-min.gif
  47. BIN images/course.gif
  48. BIN images/course.png
  49. BIN images/cover.png
  50. BIN images/css-starwars-min.gif
  51. BIN images/css-starwars.gif
  52. BIN images/css-starwars.png
  53. BIN images/cubic-bezier-graph.png
  54. BIN images/cubic-bezier-min.gif
  55. BIN images/cubic-bezier.gif
  56. BIN images/cubic-bezier.png
  57. BIN images/demo-min.gif
  58. BIN images/demo.gif
  59. BIN images/demo.png
  60. BIN images/donovan.jpg
  61. BIN images/donovan_hutchinson.jpg
  62. BIN images/ease-in-min.gif
  63. BIN images/ease-in-out-min.gif
  64. BIN images/ease-in-out.gif
  65. BIN images/ease-in.gif
  66. BIN images/ease-out-min.gif
  67. BIN images/ease-out.gif
  68. BIN images/fabric-min.gif
  69. BIN images/fabric.gif
  70. BIN images/files.jpg
  71. BIN images/js-triggered-button-min.gif
  72. BIN images/js-triggered-button.gif
  73. BIN images/linear-example-min.gif
  74. BIN images/linear-example.gif
  75. BIN images/linear-min.gif
  76. BIN images/linear.gif
  77. BIN images/list_item-min.gif
  78. BIN images/list_item.gif
  79. BIN images/macplus-min.gif
  80. BIN images/macplus.gif
  81. BIN images/mailchimp-min.gif
  82. BIN images/mailchimp.gif
  83. BIN images/multiple-button-min.gif
  84. BIN images/multiple-button.gif
  85. BIN images/portal-min.gif
  86. BIN images/portal.gif
  87. BIN images/ribbon-min.gif
  88. BIN images/ribbon.gif
  89. BIN images/save_button-min.gif
  90. BIN images/save_button.gif
  91. BIN images/screen-hover-min.gif
  92. BIN images/screen-hover.gif
  93. BIN images/screen-min.gif
  94. BIN images/screen.gif
  95. BIN images/scroll-min.gif
  96. BIN images/scroll.gif
  97. BIN images/sheen-min.gif
  98. BIN images/sheen.gif
  99. BIN images/simple-keyframes-alternating-min.gif
  100. BIN images/simple-keyframes-alternating.gif
  101. BIN images/simple-keyframes-min.gif
  102. BIN images/simple-keyframes.gif
  103. BIN images/sprout-min.gif
  104. BIN images/sprout.gif
  105. BIN images/starwars-min.gif
  106. BIN images/starwars.gif
  107. BIN images/starwars.png
  108. BIN images/steps-min.gif
  109. BIN images/steps.gif
  110. BIN images/steps.png
  111. BIN images/traffic-light-grid.png
  112. BIN images/traffic-lights-min.gif
  113. BIN images/traffic-lights.gif
  114. BIN images/transitions-animations-min.gif
  115. BIN images/transitions-animations.gif
  116. BIN images/transitions-min.gif
  117. BIN images/transitions.gif
  118. BIN images/wiggle-min.gif
  119. BIN images/wiggle.gif
  120. BIN images/winnie-min.gif
  121. BIN images/winnie.gif
  122. +9 −0 metadata.yml
  123. BIN sources/cover.sketch
  124. BIN sources/images.sketch
  125. +325 −0 style.css
@@ -0,0 +1,3 @@
@@ -0,0 +1,39 @@
BUILD = build
METADATA = metadata.yml
CHAPTERS = chapters/*.md
TOC = --toc --toc-depth=2
COVER_IMAGE = images/cover.png
LATEX_CLASS = report
MATH_FORMULAS = --webtex
CSS_FILE = style.css
CSS_ARG = --css=$(CSS_FILE)
all: book
book: epub html pdf
rm -r $(BUILD)
epub: $(BUILD)/epub/$(OUTPUT_FILENAME).epub
html: $(BUILD)/html/$(OUTPUT_FILENAME).html
pdf: $(BUILD)/pdf/$(OUTPUT_FILENAME).pdf
mkdir -p $(BUILD)/epub
pandoc $(ARGS) --epub-metadata=$(METADATA) --epub-cover-image=$(COVER_IMAGE) -o $@ $^
mkdir -p $(BUILD)/html
pandoc $(ARGS) --standalone --to=html5 -o $@ $^
cp $(CSS_FILE) $(BUILD)/html/$(CSS_FILE)
mkdir -p $(BUILD)/pdf
pandoc $(ARGS) -V documentclass=$(LATEX_CLASS) -o $@ $^
@@ -0,0 +1,15 @@
# CSS Animation 101 Book
Animation using CSS can be overwhelming to learn all at once.
This book gives you a solid intruction to the topic, combining theory with practical lessons. You’ll learn how, and why to use animation on your web pages and hopefully be inspired to try it on your own projects!
Find more including free tutorials and other courses at [](
## Technical details
This book is generated with [Pandoc book template](
## License
[Creative Commons Attribution 4.0 International](
@@ -0,0 +1,53 @@
# Welcome
> "Tell me and I forget. Teach me and I remember. Involve me and I learn."
> _Benjamin Franklin_
Welcome to CSS Animation 101, and thank you for choosing this book.
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 _transitions_ and _animations_. By the end you'll have a good understanding of CSS animations as well as the tools to create and experiment with our own.
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.
## Hello, I'm Donovan
![Donovan Hutchinson](images/donovan.jpg)
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, and this year I've been writing tutorials on [](, all about advanced and useful animations in the browser.
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.
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 `transition` and `animation` properties are for, how they work, and see them in action.
By the end of this book you should be confident enough to begin applying animation to your projects.
## Book structure
Here's what we're going to cover.
**First:** What's animation anyway? This week we'll look at why we animate. We'll also introduce the `transition` and `animation` properties and some sources of inspiration.
**Then:** All about the **transition** property. We'll learn how transitions work, and the properties we can control to change the movement.
**After that:** We'll take on the **animation** property, and learn how to create keyframes that go beyond simple transitions.
**Lastly:** 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.
## Help and support
I love to hear from you with your questions and thoughts. Feel free to drop me an email at [](, or tweet me at [@donovanh]( at any time.
## Need to brush up on your CSS?
If you're new to CSS, it might be worth taking time to get familiar with the concepts. You don't need to be an expert in CSS. If you know what a property is, you'll be fine.
Some online tools and resources you might find helpful:
* [Interactive HTML/CSS tutorials](
* [Learn to Code HTML&CSS](
## Homework
You'll notice each chapter ends with a little **homework** section. This is entirely up to you but if you like you can use this to help with your learning. Each homework section will have a suggestion for something to try or think about. Give it a little time and you'll find your understanding of CSS animation will be even better.
**Ready?** Let's learn all about CSS animation!
@@ -0,0 +1,78 @@
# Why animate?
> "Animation is about creating the illusion of life."
> _Brad Bird_
Before we get into the technical side of CSS animation, let's discuss **why** we're animating in the first place.
## More than words alone
Animation can convey information efficiently, or it can be used to grab attention but in the end it's all about communication.
Movement in our designs gives us a more powerful way to communicate. It transcends verbal and written language.
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.
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.
## What is animation on the web?
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.
Animation can be subtle, like when the CodePen save button wiggles a little to remind us when we need to save our work:
![Animated "Save" button (](images/save_button-min.gif)
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.
We can also use animation to introduce content to a page:
![Animating list items (](images/list_item-min.gif)
By animating information onto the page, we give our viewers an extra piece of information that might otherwise be missing. The animation both draws attention to the new content being added and gives context to that new information. Without animation it would just suddenly appear, possibly leaving the viewer unsure of whether it was there all along.
We can use animation to tell a story:
![Portal animation (](images/portal-min.gif)
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 [Sprout](
![Animated chart from Sprout](images/sprout-min.gif)
## With great power comes great responsibility
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 _less_ animation when possible. Any movement you do add will be all the more powerful.
This might mean only moving a small item on your page. Sometimes it's ok to do _less_.
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:
![National Parks from Rally Interactive](images/ribbon-min.gif)
## Inspiration
Animation has a long and rich history. I recently wrote a post on [Principles of Animation for the Web]( The principles draw from Disney's 1981 book [The Illusion of Life: Disney Animation](
If you want to go further, dig into the [Animator's Survival Kit videos]( YouTube is full of sources of inspiration and ideas.
For loads of great examples, take some time to browse [Hover States]( This site features all sorts of interesting examples of animation from the web. []( is helpful also.
For example, here's a nice example from Dribbble showing [Google's Material Design principles]( Searching for "animation" is a great way to find inspiring ideas.
I also regularly check up on what's happening at [CodePen]( It's a great source of canvas and web animation examples.
## Summary
* Animation is kind of a big deal
* Used right, it can be a useful and powerful tool in our designs
* Use it to grab attention or convey information
* Don't overdo it
* If you want to stand out, animation can really help
## Homework
Think about your own work and how animation might help.
It's tempting to go crazy and animate all the things, but try to look for ways subtle animation might better _help_ 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?
Lastly, take a look at sites like <a href="">Hover States</a> and <a href="">Little Big Details</a> and <a href="">Dribbble</a>. These sorts of sites help if you're ever stuck for ideas.
@@ -0,0 +1,61 @@
# Creative environments
> "You don't learn to walk by following rules. You learn by doing, and by falling over."
> Richard Branson
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.
We'll cover two ways of doing this: developing in the browser, and developing offline (locally).
## In the browser
The simplest way to get going for small experiments is to develop online. A site I often use is [CodePen]( Another good one is [JS Fiddle](
For the rest of this course I'll be using [CodePen]( for examples and it's worth being familiar with the way it works.
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.
## Local development
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.
### Basic option: Simple HTML/CSS
The most simple option is to create a HTML file _(filename.html)_ and an associated CSS file _(filename.css)_ and link the two in the HTML. This is ok, but can be slow with lots of flicking back and forth between the browser and the editor.
I've created a set of HTML and CSS files you can copy and use to begin creating. [Download them here](
![Starting files](images/files.jpg)
### Dreamweaver / Macaw / Muse / Coda / Sublime
You can of course use whatever tool you find comfortable to create web pages. All you really need is a text editor. Some other tools come with more fancy visual editing, and if that's your preference, go for it.
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.
### Gulp
If you're familiar with Github, Node and checking out code, you might want to set up a development enviroment on your own machine.
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.
If you've used Grunt or other build tools, the process should be familiar.
I've created [a Github repo]( to make local development faster. If you're comfortable with using Git, go ahead and [follow the readme]( for setup instructions.
Do improve it if you wish and push the results back. Teamwork!
## In summary
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.
## Homework
Register with [CodePen]( 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.
_Optional:_ If you want to try local development, download local starting files:
* Basic option: [Project starter HTML/CSS files](
* Advanced: [Gulp & Sass starter](
**Next:** We'll be talking about transitions!
@@ -0,0 +1,45 @@
# Transitions
Let's look at the `transition` property.
Browsers used to be much more simple. It wasn't so long ago that they couldn't render images or handle more than a handful of fonts. Then CSS gave us power over how web pages look and feel.
Animation in browsers isn't new. Flash, Canvas and other JavaScript options have given us ways to animate but more recently CSS has become a viable option.
## Transitions
One way CSS lets us control animation in the browser with the `transition` property. In browser terms, a transition is an animation from one state to another.
![Transitions: A to B](images/ab.png)
When we use a transition on an element we tell the browser that we want it to _interpolate_, or automatically calculate, the change between states.
![Animated transition from A to B (](images/ab_animated.png)
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.
![Animated button (](images/button.png)
## Transition properties
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:
![Combining transitions (](images/winnie-min.gif)
Another example of combined transitions:
![More transitions (](images/transitions-min.gif)
Soon we will discuss how to use transitions to make these sorts of movements.
## In summary
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.
## Homework
How's your creative environment looking? How about taking a look into the code, and looking for the `transition` property in the CSS. Can you see what it's doing?
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.
**Next:** An overview of the `animation` property and how it differs from `transition`.
Oops, something went wrong.

0 comments on commit 13036e6

Please sign in to comment.