├── .gitignore
├── Makefile
├── README.md
├── chapters
├── 0101.md
├── 0102.md
├── 0103.md
├── 0104.md
├── 0105.md
├── 0201.md
├── 0202.md
├── 0203.md
├── 0204.md
├── 0205.md
├── 0301.md
├── 0302.md
├── 0303.md
├── 0304.md
├── 0305.md
├── 0401.md
├── 0402.md
├── 0403.md
├── 0404.md
├── 0405.md
└── 0501.md
├── downloads
├── epub
│ └── cssanimation-101.epub
├── pdf
│ └── cssanimation-101.pdf
└── translations
│ └── arabic
│ └── CSS-Animation-Arabic.pdf
├── images
├── ab-min.gif
├── ab.gif
├── ab.jpg
├── ab.png
├── ab_animated.png
├── abc.png
├── animators_survival_kit_frame.jpg
├── baymax-min.gif
├── baymax.gif
├── baymax.png
├── button-element-positioning.png
├── button-element-positioning2.png
├── button-min.gif
├── button.gif
├── button.png
├── cat-min.gif
├── cat.gif
├── cat.png
├── change-background-min.gif
├── change-background.gif
├── change-background.png
├── course-min.gif
├── course.gif
├── course.png
├── cover-small.png
├── cover.png
├── css-starwars-min.gif
├── css-starwars.gif
├── css-starwars.png
├── cubic-bezier-graph.png
├── cubic-bezier-min.gif
├── cubic-bezier.gif
├── cubic-bezier.png
├── demo-min.gif
├── demo.gif
├── demo.png
├── donovan.jpg
├── donovan_hutchinson.jpg
├── ease-in-min.gif
├── ease-in-out-min.gif
├── ease-in-out.gif
├── ease-in.gif
├── ease-out-min.gif
├── ease-out.gif
├── fabric-min.gif
├── fabric.gif
├── files.jpg
├── js-triggered-button-min.gif
├── js-triggered-button.gif
├── linear-example-min.gif
├── linear-example.gif
├── linear-min.gif
├── linear.gif
├── list_item-min.gif
├── list_item.gif
├── macplus-min.gif
├── macplus.gif
├── macplus.png
├── mailchimp-min.gif
├── mailchimp.gif
├── multiple-button-min.gif
├── multiple-button.gif
├── portal-min.gif
├── portal.gif
├── ribbon-min.gif
├── ribbon.gif
├── save_button-min.gif
├── save_button.gif
├── screen-hover-min.gif
├── screen-hover.gif
├── screen-min.gif
├── screen.gif
├── scroll-min.gif
├── scroll.gif
├── sheen-min.gif
├── sheen.gif
├── simple-keyframes-alternating-min.gif
├── simple-keyframes-alternating.gif
├── simple-keyframes-min.gif
├── simple-keyframes.gif
├── sprout-min.gif
├── sprout.gif
├── starwars-min.gif
├── starwars.gif
├── starwars.png
├── steps-min.gif
├── steps.gif
├── steps.png
├── traffic-light-grid.png
├── traffic-lights-min.gif
├── traffic-lights.gif
├── transitions-animations-min.gif
├── transitions-animations.gif
├── transitions-min.gif
├── transitions.gif
├── wiggle-min.gif
├── wiggle.gif
├── winnie-min.gif
└── winnie.gif
├── metadata.yml
├── sources
├── cover.sketch
└── images.sketch
└── style.css
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | build
4 |
--------------------------------------------------------------------------------
/Makefile:
--------------------------------------------------------------------------------
1 | BUILD = build
2 | OUTPUT_FILENAME = book
3 | METADATA = metadata.yml
4 | CHAPTERS = chapters/*.md
5 | TOC = --toc --toc-depth=2
6 | IMAGES_FOLDER = images
7 | COVER_IMAGE = images/cover.png
8 | LATEX_CLASS = report
9 | MATH_FORMULAS = --webtex
10 | CSS_FILE = style.css
11 | CSS_ARG = --css=$(CSS_FILE)
12 | ARGS = $(TOC) $(MATH_FORMULAS) $(CSS_ARG)
13 |
14 | all: book
15 |
16 | book: epub html pdf
17 |
18 | clean:
19 | rm -r $(BUILD)
20 |
21 | epub: $(BUILD)/epub/$(OUTPUT_FILENAME).epub
22 |
23 | html: $(BUILD)/html/$(OUTPUT_FILENAME).html
24 |
25 | pdf: $(BUILD)/pdf/$(OUTPUT_FILENAME).pdf
26 |
27 | word: $(BUILD)/word/$(OUTPUT_FILENAME).docx
28 |
29 | $(BUILD)/epub/$(OUTPUT_FILENAME).epub: $(METADATA) $(CHAPTERS)
30 | mkdir -p $(BUILD)/epub
31 | pandoc $(ARGS) --epub-metadata=$(METADATA) --epub-cover-image=$(COVER_IMAGE) -o $@ $^
32 |
33 | $(BUILD)/html/$(OUTPUT_FILENAME).html: $(CHAPTERS)
34 | mkdir -p $(BUILD)/html
35 | pandoc $(ARGS) --standalone --to=html5 -o $@ $^
36 | cp -R $(IMAGES_FOLDER)/ $(BUILD)/html/$(IMAGES_FOLDER)/
37 | cp $(CSS_FILE) $(BUILD)/html/$(CSS_FILE)
38 |
39 | $(BUILD)/pdf/$(OUTPUT_FILENAME).pdf: $(METADATA) $(CHAPTERS)
40 | mkdir -p $(BUILD)/pdf
41 | pandoc $(ARGS) -V documentclass=$(LATEX_CLASS) -o $@ $^
42 |
43 | $(BUILD)/word/$(OUTPUT_FILENAME).docx: $(METADATA) $(CHAPTERS)
44 | mkdir -p $(BUILD)/word
45 | pandoc $(ARGS) -V documentclass=$(LATEX_CLASS) -o $@ $^
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # CSS Animation 101
2 |
3 | 
4 |
5 | Animation using CSS can be overwhelming to learn all at once.
6 |
7 | This book gives you a solid introduction 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!
8 |
9 | ## Download
10 |
11 | * [ePub version](https://github.com/cssanimation/css-animation-101/raw/master/downloads/epub/cssanimation-101.epub)
12 | * [PDF version](https://github.com/cssanimation/css-animation-101/raw/master/downloads/pdf/cssanimation-101.pdf)
13 | * [Web version](https://cssanimation.rocks/css-animation-101/)
14 |
15 | Find more including free tutorials and other courses at [CSSAnimation.rocks](https://cssanimation.rocks).
16 |
17 | ## More CSS Animation stuff
18 |
19 | I have a great [video course on CSS Animation](https://www.udemy.com/course/level-up-your-css-animation-skills/) you should totally check out. You'll find it a practical guide to building and animating all sorts of parts of a landing page.
20 |
21 | I also send out a free weekly [CSS Animation newsletter](https://cssanimation.rocks/weekly/). Sign up and get an email of cool inspiration in your inbox each week.
22 |
23 | Lastly, if you want to help me with the above, consider [being a CSS Animation patreon](https://www.patreon.com/cssanimation). I've been running the newsletter for approaching 3 years and will continue to do so thanks to the support of people like you!
24 |
25 | ## Translations
26 |
27 | Want to create a translation? Some tips:
28 |
29 | * Fork this repo and rename it `css-animation-101-xx` where `xx` is your language code, such as `cn` or `ru`
30 | * Translate the `chapters` content as well as the meta information
31 | * Don't forget the `ReadMe` file also. Be sure to include a link back to this repo and the site CSSAnimation.rocks.
32 | * Let me know [on Twitter](https://twitter.com/cssanimation) or [by email](mailto:donovan@cssanimation.rocks) and I'll link your work from here
33 |
34 | You can find this book in the following languages:
35 |
36 | ### 中文 (Chinese)
37 |
38 | [Source files](https://github.com/H-Wakanda/css-animation-101-cn)
39 |
40 | * [ePub version](https://github.com/H-Wakanda/css-animation-101-cn/raw/master/build/epub/book.epub)
41 | * [Web version](https://h-wakanda.github.io/css-animation-101-cn/)
42 |
43 | ### العربية (Arabic)
44 |
45 | * [PDF version](https://github.com/cssanimation/css-animation-101/raw/master/downloads/translations/arabic/CSS-Animation-Arabic.pdf): Translated by [@HsoubAcademy](http://academy.hsoub.com)
46 |
47 | ## Contributing
48 |
49 | I love to get feedback, even if just to helpfully point out a typo! Pull requests welcomed, or else you can message me [on Twitter](https://twitter.com/cssanimation) or [by email](mailto:donovan@cssanimation.rocks).
50 |
51 | ## Technical details
52 |
53 | This book is generated with [Pandoc book template](https://github.com/wikiti/pandoc-book-template).
54 |
55 | ## License
56 |
57 | [Creative Commons Attribution 4.0 International](https://creativecommons.org/licenses/by/4.0/)
58 |
--------------------------------------------------------------------------------
/chapters/0101.md:
--------------------------------------------------------------------------------
1 | # Welcome
2 |
3 | > "Tell me and I forget. Teach me and I remember. Involve me and I learn."
4 | > _Benjamin Franklin_
5 |
6 | Welcome to CSS Animation 101, and thank you for choosing this book.
7 |
8 | 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.
9 |
10 | 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.
11 |
12 | ## Hello, I'm Donovan
13 |
14 | 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 [CSSAnimation.rocks](https://cssanimation.rocks), all about advanced and useful animations in the browser.
15 |
16 | 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.
17 |
18 | 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.
19 |
20 | By the end of this book you should be confident enough to begin applying animation to your projects.
21 |
22 | ## Book structure
23 |
24 | Here's what we're going to cover.
25 |
26 | **First:** What's animation anyway? We'll look at why we animate. We'll also introduce the `transition` and `animation` properties and some sources of inspiration.
27 |
28 | **Then:** All about the **transition** property. We'll learn how transitions work, and the properties we can control to change the movement.
29 |
30 | **After that:** We'll take on the **animation** property, and learn how to create keyframes that go beyond simple transitions.
31 |
32 | **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.
33 |
34 | ## Help and support
35 |
36 | I love to hear from you with your questions and thoughts. Feel free to drop me an email at [donovan@cssanimation.rocks](mailto:donovan@cssanimation.rocks), or tweet me at [@donovanh](https://twitter.com/donovanh) at any time.
37 |
38 | ## Need to brush up on your CSS?
39 |
40 | 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.
41 |
42 | Some online tools and resources you might find helpful:
43 |
44 | * [Interactive HTML/CSS tutorials](http://www.codeavengers.com)
45 | * [Learn to Code HTML&CSS](http://learn.shayhowe.com/html-css/)
46 |
47 | ## Homework
48 |
49 | 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.
50 |
51 | **Ready?** Let's learn all about CSS animation!
52 |
--------------------------------------------------------------------------------
/chapters/0102.md:
--------------------------------------------------------------------------------
1 | # Why animate?
2 |
3 | > "Animation is about creating the illusion of life."
4 | > _Brad Bird_
5 |
6 | Before we get into the technical side of CSS animation, let's discuss **why** we're animating in the first place.
7 |
8 | ## More than words alone
9 |
10 | Animation can convey information efficiently, or it can be used to grab attention but in the end it is all about communication.
11 |
12 | Movement in our designs gives us a more powerful way to communicate. It transcends verbal and written language.
13 |
14 | 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.
15 |
16 | 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.
17 |
18 | ## What is animation on the web?
19 |
20 | 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.
21 |
22 | Animation can be subtle, like when the CodePen save button wiggles a little to remind us when we need to save our work:
23 |
24 | 
25 |
26 | 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.
27 |
28 | We can also use animation to introduce content to a page:
29 |
30 | 
31 |
32 | 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.
33 |
34 | We can use animation to tell a story:
35 |
36 | 
37 |
38 | 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.
39 |
40 | ## With great power comes great responsibility
41 |
42 | It can be easy to do too much with animation. Having too many things moving around on the page at once is distracting.
43 |
44 | Try to do _less_ animation when possible. Any movement you do add will be all the more powerful.
45 |
46 | This might mean only moving a small item on your page. Sometimes it is better to do _less_.
47 |
48 | 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.
49 |
50 | ## Inspiration
51 |
52 | Animation has a long and rich history. I recently wrote a post on [Principles of Animation for the Web](https://cssanimation.rocks/principles/). The principles draw from Disney's 1981 book [The Illusion of Life: Disney Animation](http://en.wikipedia.org/wiki/12_basic_principles_of_animation).
53 |
54 | If you want to go further, dig into the [Animator's Survival Kit videos](https://www.youtube.com/watch?v=loCiTO8qEMI). YouTube is full of sources of inspiration and ideas.
55 |
56 | For loads of great examples, take some time to browse [Hover States](http://hoverstat.es/). This site features all sorts of interesting examples of animation from the web. [Dribbble.com](https://dribbble.com/) is helpful also.
57 |
58 | For example, here's a nice example from Dribbble showing [Google's Material Design principles](https://dribbble.com/shots/1621920-Google-Material-Design-Free-AE-Project-File). Searching for "animation" is a great way to find inspiring ideas.
59 |
60 | I also regularly check up on what's happening at [CodePen](https://codepen.io). A great source of canvas and web animation examples.
61 |
62 | ## Summary
63 |
64 | * Animation is kind of a big deal
65 | * Used right, it can be a useful and powerful tool in our designs
66 | * Use it to grab attention or convey information
67 | * Don't overdo it
68 | * If you want to stand out, animation can really help
69 |
70 | ## Homework
71 |
72 | Think about your own work and how animation might help.
73 |
74 | Try not to go crazy and animate all the things. 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?
75 |
76 | Lastly, take a look at sites like Hover States and Little Big Details and Dribbble. These sorts of sites help if you're ever stuck for ideas.
77 |
--------------------------------------------------------------------------------
/chapters/0103.md:
--------------------------------------------------------------------------------
1 | # Creative environments
2 |
3 | > "You don't learn to walk by following rules. You learn by doing, and by falling over."
4 | > Richard Branson
5 |
6 | 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.
7 |
8 | We'll cover two ways of doing this: developing in the browser, and developing offline (locally).
9 |
10 | ## In the browser
11 |
12 | The simplest way to get going for small experiments is to develop online. A site I often use is [CodePen](https://codepen.io). Another good one is [JS Fiddle](http://jsfiddle.net/).
13 |
14 | For the rest of this course I'll be using [CodePen](https://codepen.io) for examples and it can be worth being familiar with the way it works.
15 |
16 | 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.
17 |
18 | ## Local development
19 |
20 | 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.
21 |
22 | ### Basic option: Simple HTML/CSS
23 |
24 | 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.
25 |
26 | I've created a set of HTML and CSS files you can copy and use to begin creating. [Download them here](https://github.com/cssanimation/starter/archive/master.zip).
27 |
28 | 
29 |
30 | ### Dreamweaver / Macaw / Muse / Coda / Sublime
31 |
32 | 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.
33 |
34 | 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.
35 |
36 | ### Gulp
37 |
38 | If you're familiar with Github, Node and checking out code, you might want to set up a development enviroment on your own machine.
39 |
40 | 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.
41 |
42 | If you've used Grunt or other build tools, the process should be familiar.
43 |
44 | I've created [a Github repo](https://github.com/cssanimation/gulp-sass-starter) to make local development faster. If you're comfortable with using Git, go ahead and [follow the readme](https://github.com/cssanimation/gulp-sass-starter/blob/master/README.md) for setup instructions.
45 |
46 | Do improve it if you wish and push the results back. Teamwork!
47 |
48 | ## In summary
49 |
50 | 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.
51 |
52 | ## Homework
53 |
54 | Register with [CodePen](http://codepen.io). 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.
55 |
56 | _Optional:_ If you want to try local development, download local starting files:
57 |
58 | - Basic option: [Project starter HTML/CSS files](https://github.com/cssanimation/starter/archive/master.zip)
59 | - Advanced: [Gulp & Sass starter](https://github.com/cssanimation/gulp-sass-starter)
60 |
61 | **Next:** We'll be talking about transitions!
62 |
--------------------------------------------------------------------------------
/chapters/0104.md:
--------------------------------------------------------------------------------
1 | # Transitions
2 |
3 | Let's look at the `transition` property.
4 |
5 | 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.
6 |
7 | 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.
8 |
9 | ## Transitions
10 |
11 | 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.
12 |
13 | 
14 |
15 | 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.
16 |
17 | 
18 |
19 | 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.
20 |
21 | 
22 |
23 | ## Transition properties
24 |
25 | 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.
26 |
27 | Another example of combined transitions:
28 |
29 | 
30 |
31 | Soon we will discuss how to use transitions to make these sorts of movements.
32 |
33 | ## In summary
34 |
35 | 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.
36 |
37 | ## Homework
38 |
39 | 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 is happening?
40 |
41 | 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.
42 |
43 | **Next:** An overview of the `animation` property and how it differs from `transition`.
44 |
--------------------------------------------------------------------------------
/chapters/0105.md:
--------------------------------------------------------------------------------
1 | # Animations
2 |
3 | So far we've discussed why we animate, found some sources of inspiration, looked at tools and sites we might find useful for development, and learned what transitions are.
4 |
5 | Next, allow me to introduce the `animation` property.
6 |
7 | ## Animation in the browser
8 |
9 | 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.
10 |
11 | While transitions are all about smoothing the change from state A to state B, animations are a way to describe multiple steps.
12 |
13 | 
14 |
15 | 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.
16 |
17 | Animations also behave a little differently. They can begin automatically. While a transition might require adding a class or a change of state such as hovering, animations can start when the page loads.
18 |
19 | This means that if telling a story or drawing attention to something on a page, animations can be a good choice.
20 |
21 | ## Examples
22 |
23 | The "Save" button movement we see on Codepen is a good example of a practical animation.
24 |
25 | 
26 |
27 | It does a great job helping people notice the button.
28 |
29 | The effect is made up of a series of `keyframes` that tell the browser to shake the button from left to right. We'll dig more into keyframes in greater depth in chapter 3.
30 |
31 | We can do so much more with CSS positioning and keyframe animations. For another example check out this CSS-only 3D Mac Plus!
32 |
33 | 
34 |
35 | This CSS Mac Plus is [available on CodePen](http://codepen.io/donovanh/full/HGqjp/) and here's a [step-by-step guide](https://cssanimation.rocks/macplus/) to building it.
36 |
37 | ## Transitions vs. Animations
38 |
39 | 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.
40 |
41 | 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.
42 |
43 | We'll take some time to work on the animation property later.
44 |
45 | ## Homework
46 |
47 | 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.
48 |
49 | If you've downloaded the starter HTML and CSS, take a look for the `animation` property. Unlike transitions, animations need a second part, called `keyframes`. Try changing some values and see what happens.
50 |
--------------------------------------------------------------------------------
/chapters/0201.md:
--------------------------------------------------------------------------------
1 | # Transitions in action
2 |
3 | Now that we have introduced the `transition` and `animation` properties, lets delve further into transitions and see some code!
4 |
5 | ## Transitions
6 |
7 | 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.
8 |
9 | A `transition` is a property in CSS. Just as you'd give an element a height, width, or border, we give elements transitions too.
10 |
11 | We can write a transition in CSS like this:
12 |
13 | transition: background 0.5s linear;
14 |
15 | In this case we're telling the browser that a transition of the background property, will take half a second, and use the "linear" timing function.
16 |
17 | The above property might cause a button's background to change when hovered over:
18 |
19 | button {
20 | background: white;
21 | transition: background 0.5s linear;
22 | }
23 |
24 | button:hover {
25 | background: green;
26 | }
27 |
28 | Notice the `transition` property to the first `button` reference in the CSS state. This tells the browser to apply a transition to any change of state such as on hover as well as when changing back _from_ the hover state.
29 |
30 | If we applied the transition property to the hover state only, it would only transition _to_ the hover state but not back.
31 |
32 | 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.
33 |
34 | ## Example: Button transition
35 |
36 | 
37 |
38 | [Here's a CodePen](http://codepen.io/donovanh/pen/MYQdZd) demonstrating the hover effect. In CodePen, you can make changes to the HTML and CSS and see the results immediately.
39 |
40 | The important thing to look for is the any property beginning `transition-`. I've written them out long-hand for demonstration like so:
41 |
42 | transition-property: all;
43 | transition-duration: 0.4s;
44 | transition-timing-function: ease-out;
45 |
46 | This code that tells the browser what sort of movement to generate between the non-hover state and the hover state. It tells the browser to animate _all_ properties (colours, size, position), over a duration of 0.4 seconds.
47 |
48 | Try changing some of these values. For example, change the "0.4s" to something longer, like "2s" (two seconds). How does the animation feel? You could change the property from "all" to "background".
49 |
50 | For a fun effect, try changing the `transition-timing-function` value from `ease-out` to:
51 |
52 | transition-timing-function: cubic-bezier(.59,-0.26,.33,1.42)
53 |
54 | The cubic bezier timing function is a lot of fun. We'll cover timing functions in more detail on another day.
55 |
56 | ## Prefixes and browser compatibility
57 |
58 | 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.
59 |
60 | 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:
61 |
62 | -webkit-transition: ...;
63 | -moz-transition: ...;
64 | transition: ...;
65 |
66 | ## Homework
67 |
68 | Edit the button in today's example and add your own ideas. You could try changing the shape, border, or almost any property. Have some fun, the goal is to make sure you're familiar with how a transition affects the element's hover effect.
69 |
70 | For some inspiration check out this [awesome hover style](http://codepen.io/nxtonic/pen/gbZNKJ). There are loads of great examples around if you are looking for ideas.
71 |
72 | If you want to go further, try creating a new CodePen with an element that changes from one thing to another on hover. See if you can have an element within it move at a different rate. Don't worry if you haven't got to this point yet, we'll cover the properties in more detail.
73 |
74 |
--------------------------------------------------------------------------------
/chapters/0202.md:
--------------------------------------------------------------------------------
1 | # Transitions properties
2 |
3 | Now that we have seen the `transition` property in action, let's look at the properties that go into transitions and what they mean.
4 |
5 | ## Shorthand vs Longhand
6 |
7 | When writing CSS, we can often summarise multiple properties into one in a shorthand property. For example, padding written as shorthand might look like this:
8 |
9 | padding: 10px 20px 15px 25px;
10 |
11 | This would be the equivalent of:
12 |
13 | padding-top: 10px;
14 | padding-right: 20px;
15 | padding-bottom: 15px;
16 | padding-left: 25px;
17 |
18 | In the same way, we can write a transition as shorthand too:
19 |
20 | transition: all 0.5s 1s linear;
21 |
22 | In this case, the shorthand corresponds to:
23 |
24 | transition: [property] [duration] [delay] [timing-function];
25 |
26 | Each of these properties can be written individually:
27 |
28 | transition-property: all;
29 | transition-duration: 0.5s;
30 | transition-delay: 1s;
31 | transition-timing-function: linear;
32 |
33 | Let's look at each of these properties.
34 |
35 | ### transition-property
36 |
37 | Usually stated first in the shorthand, this is the property that the browser will animate. To change the background for example, `background` could be used. You can use `all` to have all applicable CSS properties transition.
38 |
39 | ### transition-duration
40 |
41 | A `transition-duration` 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.
42 |
43 | ### transition-delay
44 |
45 | The `transition-delay` 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, `3s` would be three seconds and `100ms` would be one hundred milliseconds. Equally, you could write that as `0.1s`. Up to you.
46 |
47 | ### transition-timing-function
48 |
49 | 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.
50 |
51 | ## Things transitions _don't_ work on
52 |
53 | 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.
54 |
55 | 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.
56 |
57 | However you _can_ animate things like opacity and background position. By moving background images around or hiding them you can create interesting effects.
58 |
59 | See it in action on this [Baymax example](http://cssanimation.rocks/baymax/) where a background image is moved to create the animation.
60 |
61 | 
62 |
63 | A similar effect is used on this [button sheen effect](https://cssanimation.rocks/pseudo-elements/), where the background gradient is animated across the front of a button.
64 |
65 | 
66 |
67 | ## Homework
68 |
69 | I've created [a basic Codepen](http://codepen.io/donovanh/pen/NPYNGa?editors=110) to try out transitions.
70 |
71 | At the moment there a transition from a diamond shape into a circle. Try changing some of the attributes, to see what happens.
72 |
73 | 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.
74 |
--------------------------------------------------------------------------------
/chapters/0203.md:
--------------------------------------------------------------------------------
1 | # Timing functions
2 |
3 | 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.
4 |
5 | For example, [here is an example of a transition using a `linear` timing function](https://codepen.io/donovanh/pen/vMPgmd). It moves back and forth at an unchanging pace.
6 |
7 | Contrast this to [this example using cubic-bezier timing functions](https://codepen.io/donovanh/pen/Zbjbrx). You'll see quite a big difference!
8 |
9 | For this example we're using customised `cubic-bezier` timing function:
10 |
11 | 
12 |
13 | The `cubic-bezier` approach in this case tells the animation to rock back a little before quickly moving to the second state, and actually goes a little past it before correcting back.
14 |
15 | The CSS for the beginning and hover state of each example is the same, all that's changed is the timing function.
16 |
17 | Let's go through each and learn how they impact the way our elements move.
18 |
19 | If you'd like to play with these in an example, I've set up [a CodePen here](http://codepen.io/donovanh/pen/GgaRNv).
20 |
21 | ## Linear
22 |
23 | 
24 |
25 | A linear transition moves at a steady rate from beginning to end. Since there's no curve in the transition, it never accelerates or decelerates. This can be useful if making animations that need a steady movement, like the scenery moving past the background of a train window or a steadily rotating moon.
26 |
27 | ## Ease-in
28 |
29 | 
30 |
31 | The ease-in timing function begins slowly and accelerates toward the end of the transition. It would be similar to a ball beginning to roll down a hill, finishing at the fastest speed at the bottom. Or perhaps a bored fish swimming left and right.
32 |
33 | ## Ease-out
34 |
35 | 
36 |
37 | Ease-out is the opposite of ease-in. It starts fast and slows down toward the end of the transition. Useful for when something needs to appear as if it was rushing from off-screen and slowing down to stop.
38 |
39 | ## Ease-in-out
40 |
41 | 
42 |
43 | Ease-in-out is a combination of both the ease-in and ease-out functions. It begins slowly, accelerates through the middle part of the transition, then slows toward the end. It could illustrate a car starting from a standstill, accelerating, then slowing down before stopping. If making a loading animation, something like this can look pretty good.
44 |
45 | ## Cubic-bezier
46 |
47 | 
48 |
49 | All the timing functions we've seen so far are examples of cubic bezier curve. This is a curve that describes the "shape" of the timing function.
50 |
51 | In this way, specifying a `cubic-bezier` timing function is like creating a timing function of our own.
52 |
53 | They consist of 4 values, representing two co-ordinates. A cubic-bezier can look like this:
54 |
55 | transition-timing-function: cubic-bezier(1,-0.49,.13,1.09);
56 |
57 | The two co-ordinates here are (1, -0.49) and (.13, 1.09). On a graph, they look like this:
58 |
59 | 
60 |
61 | Rather than create these by hand, I use [cubic-bezier.com](http://cubic-bezier.com). A great way to create some interesting effects.
62 |
63 | They really get fun when using values greater than 1. This will create transitions that overshoot and bounce back.
64 |
65 | ## Steps
66 |
67 | 
68 |
69 | Where most of the timing functions involve curves, the steps function divides the transition into a set of steps and jumps between each. For example, if you specify `steps(4)` the transition divides the duration into 4 discrete jumps (pictured above).
70 |
71 | 
72 |
73 | This is useful for sprite animation. For example, a loading spinner or animated video game character. By setting the background position at the beginning of a series of frames, the steps timing function can then be used to jump through each frame and create the appearance of movement.
74 |
75 | To see a good example of this in action, check out the [Twitter fave button](https://cssanimation.rocks/twitter-fave/) animation.
76 |
77 | You can also specify whether the transition holds the first frame for the fragment of the duration or whether it holds the final frame. The default is `end`, as this assumes that the first frame in the sprite is already showing before the animation begins.
78 |
79 | We can specify which applies when setting the steps:
80 |
81 | transition: all 2s steps(10, start);
82 | transition: all 2s steps(10, end);
83 |
84 | ## More examples
85 |
86 | I've written on the subject of [timing functions here](https://medium.com/css-tutorials/bouncy-transitions-c0c8085d489) if you'd like to read more and see other examples.
87 |
88 | ## Homework
89 |
90 | Following on from [the previous homework example](http://codepen.io/donovanh/pen/NPYNGa?editors=110) try changing the `transition-timing-function` value and see how it changes the way the transition feels.
91 |
92 | You can also try changing values on [this demo](http://codepen.io/donovanh/pen/GgaRNv). Technically this is an animation rather than a transition but the timing function applies in the same way.
93 |
--------------------------------------------------------------------------------
/chapters/0204.md:
--------------------------------------------------------------------------------
1 | # Multiple transitions
2 |
3 | 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.
4 |
5 | ## Example 1: Fancy button
6 |
7 | While we've seen a simple button hover effect already, we can combine multiple transitions into a single button for a more interesting effect.
8 |
9 | 
10 |
11 | In [this example](http://codepen.io/donovanh/pen/YPMGpJ) a hover effect combines several changes of state, but all are defined by a single transition:
12 |
13 | transition: transform 0.4s cubic-bezier(.72,-0.61,.25,1.51);
14 |
15 | Here's how it works. The button is made up of two icons and two pieces of text. The initial (non-hover) state is that the "Follow me" text and Twitter icon are positioned inside the button. I position the @ symbol and the "cssanimation" text outside the button like so:
16 |
17 | 
18 |
19 | Then I add a hover state, in which the elements outside the button are positioned inside the button, like so:
20 |
21 | 
22 |
23 | I do this using CSS transforms. For example, the Twitter symbol is positioned using absolute positioning. When setting it up I positioned it where I wanted using `left` and `top` values:
24 |
25 | .icon {
26 | position: absolute;
27 | left: 0.75em;
28 | top: 0.75em;
29 | }
30 |
31 | Then I add a hover state for the button and position the Twitter icon outside the button with a transform:
32 |
33 | a:hover .icon {
34 | transform: translateY(3em);
35 | }
36 |
37 | Adding `overflow: hidden` to the container means that elements outside the button won't show.
38 |
39 | With no transition in place, the icon would suddenly disappear. Since each of these elements inside the button is a span, I can apply the transition to them all at once:
40 |
41 | span {
42 | transition: transform 0.4s cubic-bezier(.72,-0.61,.25,1.51);
43 | }
44 |
45 | This now means that any `span` elements will be transitioned if their state changes, such as on hover. The same trick is applied to the other parts of the button.
46 |
47 | You can [see this example in full on CodePen](http://codepen.io/donovanh/pen/YPMGpJ).
48 |
49 | ## Example 2: Background reveal
50 |
51 | In this example I've set up a card containing some text, and show the text on hover.
52 |
53 | 
54 |
55 | The initial (non-hover) state of the card has the title showing but the paragraph text has an `opacity` of zero. On hover, we change that to 1 to show the text, and change the height of the text container.
56 |
57 | Without transitions, it [looks like this](http://codepen.io/donovanh/pen/PwgKLw?editors=110). When we hover over the card the change is sudden.
58 |
59 | With the addition two transitions to change the mood entirely. [Here's the result](http://codepen.io/donovanh/pen/LEvjJg).
60 |
61 | The first transition (written short-hand this time) looks like this:
62 |
63 | transition: all 0.5s cubic-bezier(.48,-0.28,.41,1.4);
64 |
65 | This tells the browser to animate all properties over a duration of 0.5 seconds and uses the `cubic-bezier` transition to give it some bounce. It affects the height of the text container in this case.
66 |
67 | The second transition makes the text move. Here a `ease-out` timing function is used:
68 |
69 | transition: all 0.4s ease-out;
70 |
71 | There's a lot that we can achieve by changing states on hover. In this example the `info` div's height and the paragraph are both give new values within the `.card:hover` state.
72 |
73 | In this example we use two transitions so that each of the moving parts moves in a different way. Having elements move at different paces can really help add appeal to a transition.
74 |
75 | You can also [see this example on CodePen](http://codepen.io/donovanh/pen/LEvjJg).
76 |
77 | ## Multiple transitions on a single element
78 |
79 | As well as using multiple transitions on multiple elements, we can also use more than one transition on a single element.
80 |
81 | 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.
82 |
83 | We can achieve this by combining multiple transitions into a single declaration. Multiple transitions are separated by commas.
84 |
85 | For example:
86 |
87 | transition: background 1s ease-out, border 0.5s linear;
88 |
89 | 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.
90 |
91 | ## Homework
92 |
93 | 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:
94 |
95 | * Example 1: [Fancy button](http://codepen.io/donovanh/pen/YPMGpJ)
96 | * Example 2: [Cat Hover card](http://codepen.io/donovanh/pen/LEvjJg)
97 |
98 | Can you think of ways these sorts of transitions might help in a project you're currently working on?
99 |
100 | We've covered a lot so far. Next we'll take a look at how we can apply these transitions using JavaScript.
101 |
--------------------------------------------------------------------------------
/chapters/0205.md:
--------------------------------------------------------------------------------
1 | # Transitions and JavaScript
2 |
3 | So far we've been using the `transition` property in CSS to animate between two states, a non-hover and a hover (or focus) state.
4 |
5 | These transitions have required hovering over the element. This isn't the only way we can trigger animations, so today we'll cover two ways we can use JavaScript to achieve the same result.
6 |
7 | ## Add or remove classes
8 |
9 | Since the power of transitions is to animate between two states, we can create those states as separate classes. Then we add or remove these classes using JavaScript.
10 |
11 | 
12 |
13 | This example consists of a button and a content `div`. Initially the content container has the class `hide`. In the CSS, the `hide` class gives it an `opacity` of 0.
14 |
15 | We also have a second class in the CSS called `show`. This class has an opacity of 1.
16 |
17 | When the button is clicked, we toggle the class of the `div` between `hide` and `show`. To give it animation, we apply a `transition` to the `div` also.
18 |
19 | See it in action [on this CodePen](http://codepen.io/donovanh/pen/YPbxqa).
20 |
21 | If you'd like to read more, you might enjoy the article, [Adding Appeal to Your Animations on the Web](http://webdesign.tutsplus.com/tutorials/adding-appeal-to-your-animations-on-the-web--cms-23649).
22 |
23 | Toward the end of this course we'll look into how we can trigger transitions and animations on scroll.
24 |
25 | ## Controlling transitions with JavaScript
26 |
27 | We can go further than adding or removing classes. Using JavaScript we can set the CSS properties directly like so:
28 |
29 | element.style.transition = 'opacity 1s ease-out';
30 |
31 | In this case, "element" is an element we've selected. For example, if an element has the ID "js-show", you could apply a transition to it using `getElementById`:
32 |
33 | document.getElementById('js-show').style.transition = 'opacity 1s ease-out';
34 |
35 | When we do this, we must remember to include _vendor prefixes_ too. The above would need to be written:
36 |
37 | document.getElementById('js-show').style.webkitTransition = 'opacity 1s ease-out';
38 | document.getElementById('js-show').style.transition = 'opacity 1s ease-out';
39 |
40 | Here the `webkitTransition` applies to any browsers that would otherwise use the `-webkit-` prefix in CSS.
41 |
42 | ## Let's recap
43 |
44 | In this chapter we've covered the `transition` property. We learned we can use this property to tell a browser to animate from one state to another.
45 |
46 | 
47 |
48 | Along the way we've learned about the various properties: duration, delay, and timing functions.
49 |
50 | Putting these together we can create interesting combinations of effects, and even apply multiple transitions to a single element.
51 |
52 | Finally, we wrapped it up today by covering how to apply these transitions using JavaScript.
53 |
54 | Transitions are but one part of the CSS Animation puzzle. Next we'll cover the `animation` property.
55 |
56 | ## Homework
57 |
58 | Before we start looking at the `animation` property, take some time to think about how you use transitions.
59 |
60 | Can you think of ways they could help smooth the interactions or state changes on your pages? How might they add appeal?
61 |
--------------------------------------------------------------------------------
/chapters/0301.md:
--------------------------------------------------------------------------------
1 | # Animations in action
2 |
3 | Now that we've looked at the `transition` property, let's take a deeper look at the `animation` property.
4 |
5 | 
6 |
7 | ## A symbiotic relationship
8 |
9 | The `animation` property is applied to an element just like a `transition`. It also needs a second part, called `keyframes`.
10 |
11 | .element {
12 | animation: ...
13 | }
14 |
15 | @keyframes animation-name {
16 | /* Keyframes go here */
17 | }
18 |
19 | One benefit of having the `keyframes` defined separately is that it allows us to create animations that can be reused multiple times.
20 |
21 | ## The `animation` property
22 |
23 | Applying these keyframes to an element is done with the `animation` property. It is quite similar to `transition` but with some extra properties. An `animation` could be written as the following shorthand:
24 |
25 | animation: change-background 4s linear infinite;
26 |
27 | Written as individual properties it would look like:
28 |
29 | animation-name: change-background;
30 | animation-duration: 4s;
31 | animation-timing-function: linear;
32 | animation-repeat: infinite;
33 |
34 | Where a `transition` takes a `property`, such as "background" or "all", the `animation` property is given the name of the set of `keyframes` that describe the animation sequence.
35 |
36 | Animations have some properties that transitions don't. For example, we can tell the animation to alternate back and forth rather than looping from the beginning each time.
37 |
38 | ## Keyframes
39 |
40 | A set of `keyframes` in CSS is a series of stops along the way through an animation. Each "keyframe" is a written as a percentage.
41 |
42 | I find it helps to describe this using an example. Let's start with a `div` on a web page that changes background over time. It begins with a blue background, changes to an orange background and then finally green.
43 |
44 | 
45 |
46 | If we tried to explain to someone how these background colours changed over time, we might say something like:
47 |
48 | _"Start with a blue background, then orange background halfway through and finish with a green background"_
49 |
50 | Or, if we wanted to be more precise, we could use percentages to explain the timing:
51 |
52 | _"Start at 0% of the way through with a blue background, then by 50% through be orange, and at 100% have a green background"_
53 |
54 | We could then summarise this as:
55 |
56 | 0% Blue
57 | 50% Green
58 | 100% Orange
59 |
60 | With these percentages we've created a series of "waypoints" that an animation might pass through. All we need to do now is tell the browser that these percentages are in fact `keyframes` and give the animation a name. The result is this:
61 |
62 | @keyframes change-background {
63 | 0% {
64 | background: blue;
65 | }
66 | 50% {
67 | background: orange;
68 | }
69 | 100% {
70 | background: green;
71 | }
72 | }
73 |
74 | The animation is called "change-background". We'll use that later when applying the keyframes to an element.
75 |
76 | As you read the code from the top down, the percentages are describing how far through the animation each of these keyframes takes place. We can see it in action here:
77 |
78 | 
79 |
80 | As the animation takes place, the browser creates the in-between frames needed to go from each of the background colours to the next. By telling the browser that we wanted the div to begin one colour, be another one half way through and finish on a third, the browser can do the work of creating the animation between each of these points.
81 |
82 | I've put together [a CodePen example](http://codepen.io/donovanh/pen/WbqNwd?editors=110) showing this in action.
83 |
84 | Earlier, I mentioned using the `animation-direction` property to have an animation alternate. Here's how it would look:
85 |
86 | 
87 |
88 | In this case I've changed the animation-direction property to `alternate`. See it [on CodePen here](http://codepen.io/donovanh/pen/NPZqej).
89 |
90 | ## Prefixes
91 |
92 | While this is becomeing less important, you may want to use the `-webkit-` prefix on the `animation` property. I won't add it to examples, but it will be needed for your animations to work in browsers such as Safari.
93 |
94 | In CodePen you can use the "Autoprefixer" option within the CSS settings. For local development, I use the Gulp version of Autoprefixer. [Prefix Free](http://leaverou.github.io/prefixfree/) is a decent alternative also.
95 |
96 | ## Homework
97 |
98 | Open up [this keyframes example](http://codepen.io/donovanh/pen/WbqNwd?editors=110) 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!
99 |
100 | I love seeing how you're getting on. You can [email me](mailto:donovan@cssanimation.rocks) or get in touch [on Twitter](https://twitter.com/donovanh).
101 |
--------------------------------------------------------------------------------
/chapters/0302.md:
--------------------------------------------------------------------------------
1 | # Animation properties
2 |
3 | Before we work on more animation examples, let's take a look at each of the `animation` properties.
4 |
5 | Like the `transition` property, the `animation` property can be written using shorthand, or any of these properties can be specified individually.
6 |
7 | ### animation-delay
8 |
9 | Similar to `transition-delay`, 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.
10 |
11 | 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.
12 |
13 | You can give this property a negative value such as `-1s`. This would cause the animation to start as if a second has already elapsed.
14 |
15 | ### animation-direction
16 |
17 | Animations normally begin at 0% and finish at 100%. Using `animation-direction` we use the values `normal`, `reverse`, `alternate` and `alternate-reverse` to control the direction.
18 |
19 | "Reverse" causes it to play (and loop) from 100% to 0%, while "alternate" plays from 0% to 100% and back again to 0%.
20 |
21 | ### animation-duration
22 |
23 | This is the length of the animation. Similar to `transition-duration`, this takes a value such as `1s` for one second or `200ms` for two hundred milliseconds.
24 |
25 | ### animation-fill-mode
26 |
27 | By default, an animation will play and then the element returns to its normal state. Using `animation-fill-mode` we can have the animation "stick" at either the end or beginning state.
28 |
29 | Using the value `forwards` tells the animation to finish and stay on the last keyframe. The value `backwards` returns to the first keyframe when the animation finishes.
30 |
31 | An example of this is the [bouncer animation on Hop.ie](http://hop.ie/). The animation plays once and finishes on the last frame. This is using the value `forwards`.
32 |
33 | ### animation-iteration-count
34 |
35 | This is the number of times the animation plays. By default it will play once. You can specify a number, or "infinite" to have it loop forever.
36 |
37 | ### animation-name
38 |
39 | The `animation-name` refers to the `keyframes` associated with the animation. For example, if the `animation-name` is set to "foo", it would use a set of keyframes like:
40 |
41 | @keyframes foo {
42 | ...
43 | }
44 |
45 | ### animation-play-state
46 |
47 | If you ever need to pause or resume an animation, this property lets you do so. It takes the values of `running` or `paused`, with the default being `running`. One idea might be to set this value on an animation using JavaScript.
48 |
49 | ### animation-timing-function
50 |
51 | This takes the same values the timing function property in transitions, but behaves a little differently. While a timing function, such as `ease-out` applies to the entire transition, the timing function of an animation applies between each keyframe.
52 |
53 | This means that the following keyframes would see the animation starting fast and slowing toward 50%, then picking up fast and slowing down before 100%.
54 |
55 | @keyframes foo {
56 | 0% {
57 | /* Animation starts fast and ease-out makes it slow down before 50% */
58 | }
59 | 50% {
60 | /* Again, starts fast and slows toward 100% */
61 | }
62 | 100% {
63 | /* fin */
64 | }
65 | }
66 |
67 | This can be tricky to work with. Often when creating keyframe animations I'll choose the `linear` timing function and handle the way the animation is paced using `keyframes`.
68 |
69 | Having said that, `cubic-bezier` timing functions can create some great effects when used with animations, so have a go.
70 |
71 | ## Using timing functions within keyframes
72 |
73 | When you specify a timing function for an animation, the timing function applies to _each keyframe_ of the animation.
74 |
75 | 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.
76 |
77 | For that reason we would usually define the timing function for animations as linear, and control the pacing on a per-keyframe basis:
78 |
79 | @keyframes my-animation {
80 | 0% {
81 | ...
82 | animation-timing-function: linear;
83 | }
84 | 50% {
85 | ...
86 | animation-timing-function: ease-out;
87 | }
88 | }
89 |
90 | In this case the first half of the animation will be linear, and the second half would use the `ease-out` timing function.
91 |
92 | ## Homework
93 |
94 | I've created a simple keyframe animation [here on CodePen](http://codepen.io/donovanh/pen/MYMJRd?editors=010). The properties are listed in the CSS. Try changing some of these properties, and see what happens.
95 |
--------------------------------------------------------------------------------
/chapters/0303.md:
--------------------------------------------------------------------------------
1 | # Keyframes in action
2 |
3 | So far we've been introduced to the `animation` properties, and had a chance to see how it relies on `keyframes`. Next we'll cover keyframes in greater detail.
4 |
5 | ## Things to look out for
6 |
7 | There are a couple of things about `keyframes` I'd like to cover before getting into a practical example. The first is an alternate syntax you may see, using the keywords `from` and `to`.
8 |
9 | @keyframes name {
10 | from {
11 | ...
12 | }
13 | to {
14 | ...
15 | }
16 | }
17 |
18 | While this is simple an alternate way of writing 0% and 100%, it can be simpler to understand and useful for simple animations.
19 |
20 | You may have noticed that sometimes more than one percentage value is used on the same line. This is a way to have the animation pause for a while, or hold a particular state.
21 |
22 | For example:
23 |
24 | @keyframes name {
25 | 0%, 20% {
26 | opacity: 0;
27 | }
28 | 100% {
29 | opacity: 1;
30 | }
31 | }
32 |
33 | 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.
34 |
35 | We'll make use of this tomorrow when we have multiple animations we want to stay in sync with each other.
36 |
37 | ## Example: Save button wiggle effect
38 |
39 | Remember the "Save" button example from back in chapter 1? Let's revisit that example and look at how `keyframes` are used along with the `animation` property to create the effect.
40 |
41 | 
42 |
43 | Before adding any animation I added some basic styles to a button to make it look like CodePen's. An orange border at the top, dark gradient and white text. I'm using absolute positioning in the demo to make sure the button is in the middle of the screen.
44 |
45 | The first thing I generally do is apply an `animation` property to the element. Like so:
46 |
47 | button {
48 | animation: wiggle 2s linear infinite;
49 | }
50 |
51 | In this case we're applying a set of keyframes called "wiggle", and the animation runs for two seconds with the "linear" timing function. There's also a new attribute here, `infinite`.
52 |
53 | The "infinite" value here is for the property `animation-iteration-count`. We can have animation repeat a set number of times, and by default they repeat once. In this case it'll repeat an infinite number of times.
54 |
55 | Next, we plan out what these `keyframes` are for the "wiggle" animation. Here's the result:
56 |
57 | @keyframes wiggle {
58 | 0%, 7% {
59 | transform: rotateZ(0);
60 | }
61 | 15% {
62 | transform: rotateZ(-15deg);
63 | }
64 | 20% {
65 | transform: rotateZ(10deg);
66 | }
67 | 25% {
68 | transform: rotateZ(-10deg);
69 | }
70 | 30% {
71 | transform: rotateZ(6deg);
72 | }
73 | 35% {
74 | transform: rotateZ(-4deg);
75 | }
76 | 40%, 100% {
77 | transform: rotateZ(0);
78 | }
79 | }
80 |
81 | What we have here is a series of waypoints for the browser to animate between. Each one rotates the "Save" button on the z-axis. The angles start bigger and get smaller over the course of the animation.
82 |
83 | Here's how the animation tilts the button back and forth over time:
84 |
85 | 
86 |
87 | 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.
88 |
89 | [Here's a CodePen](http://codepen.io/donovanh/pen/KwEQdQ) showing the Save button wiggle in action.
90 |
91 | ## Homework
92 |
93 | I've created [a new CodePen with a single animated element](http://codepen.io/donovanh/pen/azgjMz?editors=010). It makes use of an "animation-timing-function" within the keyframes and has a series of keyframes creating a relatively complex animation.
94 |
95 | 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!
96 |
97 |
--------------------------------------------------------------------------------
/chapters/0304.md:
--------------------------------------------------------------------------------
1 | # Multiple animations
2 |
3 | In this chapter we'll be looking at how we can make use of multiple sets of keyframes running at the same time.
4 |
5 | ## Traffic lights
6 |
7 | There are times when we want multiple animations on a page to stay in sync, but at the same time each animation has its own timing. A good example that illustrates this is traffic lights
8 |
9 | Here we have a simple (UK-style) traffic light pattern:
10 |
11 | 
12 |
13 | We have three lights, each with their own pattern of being off and on. We can create this by giving each light their own animation.
14 |
15 | .red {
16 | animation: red 10s linear infinite;
17 | }
18 | .amber {
19 | animation: amber 10s linear infinite;
20 | }
21 | .green {
22 | animation: green 10s linear infinite;
23 | }
24 |
25 | We have three animations, one for each light. Each animation lasts the same length of time so that when they loop, they won't go out of sync. Next we need to plan the keyframes.
26 |
27 | When creating this example I found it helpful to think of the lights as a grid. The animation happens from left to right, with each light being on or off at certain times.
28 |
29 | 
30 |
31 | The grid is divided up into 5 columns. This means that we can deal with "chunks" of 20% and create sets of keyframes from these chunks.
32 |
33 | Taking each light one at a time, we can start with the red light. It would be on for the first and second chunks, then off for the rest of the animation. The resulting `keyframes`:
34 |
35 | @keyframes red {
36 | 0% {
37 | background: black;
38 | }
39 | 2%, 40% {
40 | background-color: red;
41 | }
42 | 42%, 100% {
43 | background: black;
44 | }
45 | }
46 |
47 | 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.
48 |
49 | With the red light done, we look at the amber light on the grid.
50 |
51 | The amber light is off at the beginning, on for one chunk, then off for two chunks, and finally on again. The `keyframes` for this light:
52 |
53 | @keyframes amber {
54 | 0%, 20% {
55 | background: black;
56 | }
57 | 22%, 40% {
58 | background: #FF7E00;
59 | }
60 | 42%, 80% {
61 | background: black;
62 | }
63 | 82%, 100% {
64 | background: #FF7E00;
65 | }
66 | }
67 |
68 | Lastly, the green light. This light is off for the first two chunks, then on for two, and finally off for one.
69 |
70 | @keyframes green {
71 | 0%, 40% {
72 | background: black;
73 | }
74 | 42%, 80% {
75 | background: green;
76 | }
77 | 82%, 100% {
78 | background: black;
79 | }
80 | }
81 |
82 | We can [put it all together](http://codepen.io/donovanh/pen/ogRRdR?editors=010) and see it in action.
83 |
84 | ## Further reading
85 |
86 | For more reading on the subject of `keyframe` syntax, do check out [CSS tricks article on the subject](https://css-tricks.com/snippets/css/keyframe-animation-syntax/).
87 |
88 | ## Homework
89 |
90 | Today's homework is a challenge. The traffic light example might look strange to you as it follows the UK pattern.
91 |
92 | Can you start with [the traffic light example](http://codepen.io/donovanh/pen/ogRRdR?editors=010) and change it so that it works more like traffic lights in the USA or elsewhere?
93 |
--------------------------------------------------------------------------------
/chapters/0305.md:
--------------------------------------------------------------------------------
1 | # Animation recap
2 |
3 | We've covered a lot of detail so far! I hope things are making sense.
4 |
5 | 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.
6 |
7 | 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!
8 |
9 | ## Homework challenge: Traffic lights
10 |
11 | I've created an updated version of [the UK-based traffic light demo](http://codepen.io/donovanh/pen/ogRRdR?editors=010), this time changing the sequence to remove the "red + amber" stage.
12 |
13 | [See it in action here](http://codepen.io/donovanh/pen/vEqbdw?editors=010). I've made the colour scheme match what Google suggested American traffic lights look like.
14 |
15 | ## Recap: Animations
16 |
17 | In this section we looked at the `animation` property and how it works alongside `keyframes`.
18 |
19 | ### Like a transition, only different
20 |
21 | While the animation property looks and works in a way that's similar to `transition`, it has some subtle differences. While a transition will only occur when an element changes, animations can begin straight away.
22 |
23 | 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.
24 |
25 | By default, animations will play from start to finish, then jump back to their default state. We can have the animation freeze at its end point by using the `animation-direction` property of `forwards`.
26 |
27 | Animations use `timing-functions`, much like transitions. However, the timing function applies to each individual keyframe, **not** the entire set of keyframes. Instead, you can specify `animation-timing-function` within a keyframe for more granular control.
28 |
29 | Finally, animations can be specified in shorthand, just like transitions:
30 |
31 | animation: keyframe-name 2s forwards linear;
32 |
33 | ### Keyframes
34 |
35 | Every animation needs to reference a set of `keyframes`. These keyframes are a series of percentages, describing each "stage" of the animation. The browser fills in the gaps automatically.
36 |
37 | Keyframes have their own shorthand (_to_ and _from_) when you want to only go from one state to another.
38 |
39 | Stacking percentages beside each other can have the animation "pause" at that stage.
40 |
41 | 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 `opacity` of 1 (assuming the element is already visible):
42 |
43 | @keyframes name {
44 | 100% {
45 | opacity: 0;
46 | }
47 | }
48 |
49 | ## Putting them together
50 |
51 | When we want to use an animation, we always have the two pieces:
52 |
53 | .element {
54 | animation: keyframe-name ...
55 | }
56 | @keyframes keyframe-name {
57 | ...
58 | }
59 |
60 | ## Homework
61 |
62 | At this point we should be clear on the different between the animation property and the transition property.
63 |
64 | Have a look at some of the [Principles of Animation for the Web](http://codepen.io/collection/AxKOdY/) examples. Each is made entirely with HTML and CSS, using keyframe animation. Try forking one and see what you can do with it.
65 |
--------------------------------------------------------------------------------
/chapters/0401.md:
--------------------------------------------------------------------------------
1 | # Storytelling
2 |
3 | Now that we've covered both the `transition` and `animation` property, let's combine both into an animation with a hover effect.
4 |
5 | ## Heroes
6 |
7 | Many sites like to make use of a large, attention-grabbing image at the top of their homepage. Sometimes called a "hero image", this is usually a full-width banner style element.
8 |
9 | A nice example I found recently was the Fabric landing page. A CSS animatiom shows how Fabric works as a modular framework.
10 |
11 | 
12 |
13 | Another interesting example is the Mailchimp homepage. Here the hero image tells a story by demonstrating how emails are created.
14 |
15 | 
16 |
17 | You may have also seen it in action on [my CSS Animation 101 email course](https://cssanimation.rocks/courses/animation-101/) landing page:
18 |
19 | 
20 |
21 | In each of these examples, they use animation to set the tone of the page and illustrate what the site is about.
22 |
23 | ## Example: Scrolling background
24 |
25 | Let's create an example of our own. In this example I've created a "web page" style graphic that moves up and down the screen.
26 |
27 | 
28 |
29 | For a bit of interactivity, the animation pauses and a message is shown when a mouse cursor hovers over the screen. It makes use of both animations and transitions to achieve this effect.
30 |
31 | [See it in action here](http://codepen.io/donovanh/pen/LEwedW?editors=110).
32 |
33 | ## Part 1: Background animation
34 |
35 | To set up this example we begin with the HTML element to contain it:
36 |
37 |
38 |
39 | We can make the "screen" div look like a monitor or iPad using some styles:
40 |
41 | .screen {
42 | background: #e25865 url(//cssanimation.rocks/screen/images/screen_bg.png) no-repeat top center;
43 | background-size: 100% auto;
44 | border: 2em solid #fff;
45 | border-radius: 1em;
46 | width: 40em;
47 | height: 30em;
48 | }
49 |
50 | We have some styles here defining the size and border, and [setting a background image](https://cssanimation.rocks/screen/images/screen_bg.png).
51 |
52 | The effect we're creating is based on moving a background image. The background image is taller than the screen and has a `background-size` of `100% auto`. This means the background will fit the width of our container but be taller.
53 |
54 | With a background image to animate, we can now write the `keyframes` that make it look like someone is scrolling a web page:
55 |
56 | @keyframes scroll {
57 | 0%, 10% {
58 | background-position: 0 0;
59 | }
60 | 20%, 30% {
61 | background-position: 0 -22em;
62 | }
63 | 50%, 60% {
64 | background-position: 0 -44em;
65 | }
66 | 90%, 100% {
67 | background-position: 0 0;
68 | }
69 | }
70 |
71 | The property we're animating is `background-position`. With this property we can move it up and down. It begins at `0 0`, which means zero distance from the left, and zero from the top.
72 |
73 | In the next frames we have the background move 22 ems up, then 44 ems up, then return to the top of the page. Let's create an animation property to apply this to the "screen" element.
74 |
75 | .screen {
76 | animation: scroll 5s infinite cubic-bezier(.52,-0.39,.3,1.43);
77 | }
78 |
79 | This CSS is applying the a set of keyframes called "scroll", telling it to take 5 seconds, run forever and use a `cubic-bezier` timing function. In this case the cubic bezier function gives the animation the bounciness as without it the movement would look less lifelike.
80 |
81 | I generated this bezier over on [cubic-bezier.com](http://cubic-bezier.com/#.52,-0.39,.3,1.43). If you haven't bookmarked that site yet, I'd absolutely recommend you do!
82 |
83 | ## Part 2: Adding the hover transition
84 |
85 | 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 `animation-play-state` to pause the animation when on hover.
86 |
87 | .screen:hover {
88 | animation-play-state: paused;
89 | }
90 |
91 | This means that when a cursor hovers over the animation, it will pause. And when the cursor moves away again, it will resume its default `playing` state.
92 |
93 | You can achieve this with JavaScript also. One possibility is to have some JavaScript disable the animation when the user interacts with another part of the page, or perhaps when they scroll away. We'll take a look at how to enable animations on scroll later.
94 |
95 | ### Adding a message
96 |
97 | We can also go further and have a message transition into place when a user hovers over the element. To do this we'll need a little more HTML:
98 |
99 |
100 |
Hover message!
101 |
28 |
29 |
30 |
The Force Awakens
31 |
...
38 |
39 | This means that when the browser scrolls this content onto the screen, Wow.js will add "animated" to the class, like this:
40 |
41 | ...
42 |
43 | If we had an animation on our `p.animated` elements, the animation would only happen when this class is added.
44 |
45 | ## Hiding and showing
46 |
47 | For our demo, we'll hide all elements with the `wow` class, and show them when they have the `animated` class. First, we hide them:
48 |
49 | .wow {
50 | opacity: 0;
51 | transition: all 0.5s 0.5s ease-out;
52 | }
53 |
54 | We also apply a `transition` here so that the element will fade in. Notice the second `0.5s`. In this case we're also adding a `delay` of half a second. This will allow the element a chance to properly scroll into the viewport before it fades in.
55 |
56 | The next code defines how the element will look with Wow.js's `animated` class added:
57 |
58 | .animated {
59 | opacity: 1;
60 | }
61 |
62 | We should now have a situation where items will fade in as the user scrolls! [See it in action on the demo](http://codepen.io/donovanh/pen/gbVMjm).
63 |
64 | ## Using Animate.css
65 |
66 | Wow.js has been designed to work well with the CSS framework [Animate.css](http://daneden.github.io/animate.css/). 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.
67 |
68 | In [this example](http://codepen.io/donovanh/pen/xbvOQK) 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:
69 |
70 |
71 |
72 | The class `bounceInUp` 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".
73 |
74 | ## Using Modernizr
75 |
76 | 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 [Modernizr](http://modernizr.com/) can be used to handle this. It'll add a `js` class to the body of the document, and we can then bring that into our styles.
77 |
78 | I've included Modernizr in the [demo](http://codepen.io/donovanh/pen/gbVMjm).
79 |
80 | ## Homework
81 |
82 | 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.
83 |
84 | When does it work, and when does it not work so well?
85 |
--------------------------------------------------------------------------------
/chapters/0404.md:
--------------------------------------------------------------------------------
1 | # Accessibility
2 |
3 | So far we've been looking at what animation on the web is, and how to create animation. Before we finish up for this course, let's take a moment to think about what we can do to make sure we do right by our visitors.
4 |
5 | There are many ways animation can help our content, as well as ways it can get in the way.
6 |
7 | ## Make sure content is accessible
8 |
9 | An example we've used a few times is when we animate content to show it on screen. If content is beginning in a hidden state, we need to be careful that it doesn't remain hidden for some users. Older browsers support CSS animations to varying degrees, and JavaScript may not always work. We can use tools such as [Modernizr](http://modernizr.com/) to design around potential issues.
10 |
11 | We also use animation to convey meaning and intent in our designs. When designing animations, do keep in mind that some people won't be able to see them. They may be using a screen reader or have different browser settings that cause your animations to not work as intended. Make sure important information is available regardless of whether the animation works.
12 |
13 | Just that [autoplaying video is bad for users](http://www.punkchip.com/autoplay-is-bad-for-all-users/), animation that plays automatically can be distracting from other content on the page. Try to limit where and when animation happens to situations where you _want_ your visitors to be distracted by it. This might also mean limiting how long an animation plays for, or ensuring it has stopped before your visitor needs to focus elsewhere.
14 |
15 | ## Give control
16 |
17 | The W3C [recommends](http://www.w3.org/TR/2008/REC-WCAG20-20081211/#time-limits-pause) that any content that is blinking, scrolling or auto-updating for more than 5 seconds should have a means of pausing or removing the motion. Using the `animation-play-state` is one way to pause animations as needed, as [seen on hover here](http://codepen.io/donovanh/pen/LEwedW).
18 |
19 | ## Allow for alternate inputs
20 |
21 | 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 `:hover` as well as the `.active` states.
22 |
23 | ## Confusion
24 |
25 | Sometimes websites go too far and try to animate _all the things_. 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 _why_ 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.
26 |
27 | ## Don't make me sick
28 |
29 | Too much animation, or the wrong kind of animation, can make people feel sick.
30 |
31 | 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 [enough to make people sick](http://reverttosaved.com/2013/09/28/why-ios-7-is-making-some-users-sick/). 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.
32 |
33 | The reason this happens is down to the way our [vestibular system](https://www.youtube.com/watch?v=dSHnGO9qGsE) 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.
34 |
35 | 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.
36 |
37 | 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.
38 |
39 | [Vestibular.org](http://vestibular.org/understanding-vestibular-disorder) is a great starting point to learn more about this topic.
40 |
41 | ## Accessibility is for everyone's benefit
42 |
43 | 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.
44 |
45 | ## Homework
46 |
47 | If your job involves designing or building interfaces for people to use, do take time to read [NNGroup's Animation for Attention and Comprehension](http://www.nngroup.com/articles/animation-usability/). Think about how people might use your work, and what it might mean if they couldn't see the animation.
48 |
--------------------------------------------------------------------------------
/chapters/0405.md:
--------------------------------------------------------------------------------
1 | # Now you know CSS animation!
2 |
3 | You've completed CSS Animation 101! I hope you've enjoyed this book.
4 |
5 | Before we finish up, let's explore some resources you might want to bookmark and explore as you go further with CSS animation.
6 |
7 | ## CSS Animation cheatsheet
8 |
9 | I've prepared a [transitions and animations cheat sheet (PDF)](https://cssanimation.rocks/cheatsheets/transitions_animations.pdf) that sums up the various properties of each. It is designed to fit onto one A4 page. Enjoy!
10 |
11 | ## Resources to bookmark
12 |
13 | 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.
14 |
15 | ### [Animate.css](http://daneden.github.io/animate.css/)
16 |
17 | 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 [example using Animate.css](http://codepen.io/donovanh/pen/xbvOQK).
18 |
19 | ### [Hover.css](http://ianlunn.github.io/Hover/)
20 |
21 | 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.
22 |
23 | ## Other tools
24 |
25 | 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.
26 |
27 | ### [GSAP](http://greensock.com/gsap)
28 |
29 | 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.
30 |
31 | ### [Snabbt.js](http://daniel-lundin.github.io/snabbt.js/)
32 |
33 | 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.
34 |
35 | ### [CSS Animate](http://cssanimate.com/)
36 |
37 | CSS Animate is a tool for generating keyframe animations. It helps design animations by dragging an object around and uses a handy timeline approach.
38 |
39 | ### [Cubic-bezier.com](http://cubic-bezier.com)
40 |
41 | For when you want to create a feeling of life in your timing, Cubic-bezier.com is my go-to tool. A simple tool that helps sculpt timing functions. Alternately, a similar tool is built into Chrome's inspector.
42 |
43 | ## Next steps
44 |
45 | A question some have asked is "what do we do to progress past the 101 stage?".
46 |
47 | My suggestion would be to look for challenges. Look to sites such as [Dribbble.com](http://dribbble.com), or [CodePen.io](http://codepen.io) 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?
48 |
49 | I'd also suggest reading some of the posts on [CSS Tricks](https://css-tricks.com/), [SaraSoueidan.com](http://sarasoueidan.com/articles/), and of course [CSSAnimation.rocks](https://cssanimation.rocks).
50 |
51 | 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.
--------------------------------------------------------------------------------
/chapters/0501.md:
--------------------------------------------------------------------------------
1 | # Level up your CSS animation skills!
2 |
3 | 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.
4 |
5 | Introducing an essential video course: [Level Up Your CSS Animation Skills](http://courses.cssanimation.rocks/)
6 |
7 | 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.
8 |
9 | You will learn how to:
10 |
11 | - Create an amazing animated hero header
12 | - Bring your UI to life with hover, touch and button animations
13 | - Wow your visitors with scroll and parallax animations
14 | - Build your very own animated carousel
15 | - Adjust animations to fit all sizes of devices and browsers
16 | - Optimise your CSS animations for reuse and size
17 | - Each with fun examples you can follow along, step by step
18 |
19 | By the end of the course you'll have the skills you need to create an impressive animated landing page!
20 |
21 | Go to https://courses.cssanimation.rocks/ now to see what you can learn!
22 |
--------------------------------------------------------------------------------
/downloads/epub/cssanimation-101.epub:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/downloads/epub/cssanimation-101.epub
--------------------------------------------------------------------------------
/downloads/pdf/cssanimation-101.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/downloads/pdf/cssanimation-101.pdf
--------------------------------------------------------------------------------
/downloads/translations/arabic/CSS-Animation-Arabic.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/downloads/translations/arabic/CSS-Animation-Arabic.pdf
--------------------------------------------------------------------------------
/images/ab-min.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/ab-min.gif
--------------------------------------------------------------------------------
/images/ab.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/ab.gif
--------------------------------------------------------------------------------
/images/ab.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/ab.jpg
--------------------------------------------------------------------------------
/images/ab.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/ab.png
--------------------------------------------------------------------------------
/images/ab_animated.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/ab_animated.png
--------------------------------------------------------------------------------
/images/abc.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/abc.png
--------------------------------------------------------------------------------
/images/animators_survival_kit_frame.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/animators_survival_kit_frame.jpg
--------------------------------------------------------------------------------
/images/baymax-min.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/baymax-min.gif
--------------------------------------------------------------------------------
/images/baymax.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/baymax.gif
--------------------------------------------------------------------------------
/images/baymax.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/baymax.png
--------------------------------------------------------------------------------
/images/button-element-positioning.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/button-element-positioning.png
--------------------------------------------------------------------------------
/images/button-element-positioning2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/button-element-positioning2.png
--------------------------------------------------------------------------------
/images/button-min.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/button-min.gif
--------------------------------------------------------------------------------
/images/button.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/button.gif
--------------------------------------------------------------------------------
/images/button.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/button.png
--------------------------------------------------------------------------------
/images/cat-min.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/cat-min.gif
--------------------------------------------------------------------------------
/images/cat.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/cat.gif
--------------------------------------------------------------------------------
/images/cat.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/cat.png
--------------------------------------------------------------------------------
/images/change-background-min.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/change-background-min.gif
--------------------------------------------------------------------------------
/images/change-background.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/change-background.gif
--------------------------------------------------------------------------------
/images/change-background.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/change-background.png
--------------------------------------------------------------------------------
/images/course-min.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/course-min.gif
--------------------------------------------------------------------------------
/images/course.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/course.gif
--------------------------------------------------------------------------------
/images/course.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/course.png
--------------------------------------------------------------------------------
/images/cover-small.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/cover-small.png
--------------------------------------------------------------------------------
/images/cover.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/cover.png
--------------------------------------------------------------------------------
/images/css-starwars-min.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/css-starwars-min.gif
--------------------------------------------------------------------------------
/images/css-starwars.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/css-starwars.gif
--------------------------------------------------------------------------------
/images/css-starwars.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/css-starwars.png
--------------------------------------------------------------------------------
/images/cubic-bezier-graph.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/cubic-bezier-graph.png
--------------------------------------------------------------------------------
/images/cubic-bezier-min.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/cubic-bezier-min.gif
--------------------------------------------------------------------------------
/images/cubic-bezier.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/cubic-bezier.gif
--------------------------------------------------------------------------------
/images/cubic-bezier.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/cubic-bezier.png
--------------------------------------------------------------------------------
/images/demo-min.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/demo-min.gif
--------------------------------------------------------------------------------
/images/demo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/demo.gif
--------------------------------------------------------------------------------
/images/demo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/demo.png
--------------------------------------------------------------------------------
/images/donovan.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/donovan.jpg
--------------------------------------------------------------------------------
/images/donovan_hutchinson.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/donovan_hutchinson.jpg
--------------------------------------------------------------------------------
/images/ease-in-min.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/ease-in-min.gif
--------------------------------------------------------------------------------
/images/ease-in-out-min.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/ease-in-out-min.gif
--------------------------------------------------------------------------------
/images/ease-in-out.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/ease-in-out.gif
--------------------------------------------------------------------------------
/images/ease-in.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/ease-in.gif
--------------------------------------------------------------------------------
/images/ease-out-min.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/ease-out-min.gif
--------------------------------------------------------------------------------
/images/ease-out.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/ease-out.gif
--------------------------------------------------------------------------------
/images/fabric-min.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/fabric-min.gif
--------------------------------------------------------------------------------
/images/fabric.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/fabric.gif
--------------------------------------------------------------------------------
/images/files.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/files.jpg
--------------------------------------------------------------------------------
/images/js-triggered-button-min.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/js-triggered-button-min.gif
--------------------------------------------------------------------------------
/images/js-triggered-button.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/js-triggered-button.gif
--------------------------------------------------------------------------------
/images/linear-example-min.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/linear-example-min.gif
--------------------------------------------------------------------------------
/images/linear-example.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/linear-example.gif
--------------------------------------------------------------------------------
/images/linear-min.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/linear-min.gif
--------------------------------------------------------------------------------
/images/linear.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/linear.gif
--------------------------------------------------------------------------------
/images/list_item-min.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/list_item-min.gif
--------------------------------------------------------------------------------
/images/list_item.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/list_item.gif
--------------------------------------------------------------------------------
/images/macplus-min.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/macplus-min.gif
--------------------------------------------------------------------------------
/images/macplus.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/macplus.gif
--------------------------------------------------------------------------------
/images/macplus.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/macplus.png
--------------------------------------------------------------------------------
/images/mailchimp-min.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/mailchimp-min.gif
--------------------------------------------------------------------------------
/images/mailchimp.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/mailchimp.gif
--------------------------------------------------------------------------------
/images/multiple-button-min.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/multiple-button-min.gif
--------------------------------------------------------------------------------
/images/multiple-button.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/multiple-button.gif
--------------------------------------------------------------------------------
/images/portal-min.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/portal-min.gif
--------------------------------------------------------------------------------
/images/portal.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/portal.gif
--------------------------------------------------------------------------------
/images/ribbon-min.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/ribbon-min.gif
--------------------------------------------------------------------------------
/images/ribbon.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/ribbon.gif
--------------------------------------------------------------------------------
/images/save_button-min.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/save_button-min.gif
--------------------------------------------------------------------------------
/images/save_button.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/save_button.gif
--------------------------------------------------------------------------------
/images/screen-hover-min.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/screen-hover-min.gif
--------------------------------------------------------------------------------
/images/screen-hover.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/screen-hover.gif
--------------------------------------------------------------------------------
/images/screen-min.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/screen-min.gif
--------------------------------------------------------------------------------
/images/screen.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/screen.gif
--------------------------------------------------------------------------------
/images/scroll-min.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/scroll-min.gif
--------------------------------------------------------------------------------
/images/scroll.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/scroll.gif
--------------------------------------------------------------------------------
/images/sheen-min.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/sheen-min.gif
--------------------------------------------------------------------------------
/images/sheen.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/sheen.gif
--------------------------------------------------------------------------------
/images/simple-keyframes-alternating-min.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/simple-keyframes-alternating-min.gif
--------------------------------------------------------------------------------
/images/simple-keyframes-alternating.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/simple-keyframes-alternating.gif
--------------------------------------------------------------------------------
/images/simple-keyframes-min.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/simple-keyframes-min.gif
--------------------------------------------------------------------------------
/images/simple-keyframes.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/simple-keyframes.gif
--------------------------------------------------------------------------------
/images/sprout-min.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/sprout-min.gif
--------------------------------------------------------------------------------
/images/sprout.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/sprout.gif
--------------------------------------------------------------------------------
/images/starwars-min.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/starwars-min.gif
--------------------------------------------------------------------------------
/images/starwars.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/starwars.gif
--------------------------------------------------------------------------------
/images/starwars.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/starwars.png
--------------------------------------------------------------------------------
/images/steps-min.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/steps-min.gif
--------------------------------------------------------------------------------
/images/steps.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/steps.gif
--------------------------------------------------------------------------------
/images/steps.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/steps.png
--------------------------------------------------------------------------------
/images/traffic-light-grid.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/traffic-light-grid.png
--------------------------------------------------------------------------------
/images/traffic-lights-min.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/traffic-lights-min.gif
--------------------------------------------------------------------------------
/images/traffic-lights.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/traffic-lights.gif
--------------------------------------------------------------------------------
/images/transitions-animations-min.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/transitions-animations-min.gif
--------------------------------------------------------------------------------
/images/transitions-animations.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/transitions-animations.gif
--------------------------------------------------------------------------------
/images/transitions-min.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/transitions-min.gif
--------------------------------------------------------------------------------
/images/transitions.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/transitions.gif
--------------------------------------------------------------------------------
/images/wiggle-min.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/wiggle-min.gif
--------------------------------------------------------------------------------
/images/wiggle.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/wiggle.gif
--------------------------------------------------------------------------------
/images/winnie-min.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/winnie-min.gif
--------------------------------------------------------------------------------
/images/winnie.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/images/winnie.gif
--------------------------------------------------------------------------------
/metadata.yml:
--------------------------------------------------------------------------------
1 | ---
2 | title: CSS Animation 101
3 | author: Donovan Hutchinson
4 | rights: Creative Commons Attribution 4.0 International
5 | language: en-US
6 | tags: [css animation, html, css, web development]
7 | abstract: |
8 | Learn how to add animation to your web projects
9 | ---
10 |
--------------------------------------------------------------------------------
/sources/cover.sketch:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/sources/cover.sketch
--------------------------------------------------------------------------------
/sources/images.sketch:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssanimation/css-animation-101/c3689045d7b56a56d9d47673435924eca2057987/sources/images.sketch
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 |
2 | html {
3 | font-size: 100%;
4 | overflow-y: scroll;
5 | -webkit-text-size-adjust: 100%;
6 | -ms-text-size-adjust: 100%;
7 | }
8 |
9 | body {
10 | color: #444;
11 | font-family: Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
12 | font-size: 12px;
13 | line-height: 1.7;
14 | padding: 1em;
15 | margin: auto;
16 | max-width: 42em;
17 | background: #fefefe;
18 | }
19 |
20 | a {
21 | color: #0645ad;
22 | text-decoration: none;
23 | }
24 |
25 | a:visited {
26 | color: #0b0080;
27 | }
28 |
29 | a:hover {
30 | color: #06e;
31 | }
32 |
33 | a:active {
34 | color: #faa700;
35 | }
36 |
37 | a:focus {
38 | outline: thin dotted;
39 | }
40 |
41 | *::-moz-selection {
42 | background: rgba(255, 255, 0, 0.3);
43 | color: #000;
44 | }
45 |
46 | *::selection {
47 | background: rgba(255, 255, 0, 0.3);
48 | color: #000;
49 | }
50 |
51 | a::-moz-selection {
52 | background: rgba(255, 255, 0, 0.3);
53 | color: #0645ad;
54 | }
55 |
56 | a::selection {
57 | background: rgba(255, 255, 0, 0.3);
58 | color: #0645ad;
59 | }
60 |
61 | p {
62 | margin: 1em 0;
63 | }
64 |
65 | img {
66 | max-width: 100%;
67 | }
68 |
69 | h1, h2, h3, h4, h5, h6 {
70 | color: #111;
71 | line-height: 125%;
72 | margin-top: 2em;
73 | font-weight: normal;
74 | }
75 |
76 | h4, h5, h6 {
77 | font-weight: bold;
78 | }
79 |
80 | h1 {
81 | font-size: 2.5em;
82 | }
83 |
84 | h2 {
85 | font-size: 2em;
86 | }
87 |
88 | h3 {
89 | font-size: 1.5em;
90 | }
91 |
92 | h4 {
93 | font-size: 1.2em;
94 | }
95 |
96 | h5 {
97 | font-size: 1em;
98 | }
99 |
100 | h6 {
101 | font-size: 0.9em;
102 | }
103 |
104 | blockquote {
105 | color: #666666;
106 | margin: 0;
107 | padding-left: 3em;
108 | border-left: 0.5em #EEE solid;
109 | }
110 |
111 | hr {
112 | display: block;
113 | height: 2px;
114 | border: 0;
115 | border-top: 1px solid #aaa;
116 | border-bottom: 1px solid #eee;
117 | margin: 1em 0;
118 | padding: 0;
119 | }
120 |
121 | pre, code, kbd, samp {
122 | color: #000;
123 | font-family: monospace, monospace;
124 | _font-family: 'courier new', monospace;
125 | font-size: 0.98em;
126 | }
127 |
128 | pre {
129 | white-space: pre;
130 | white-space: pre-wrap;
131 | word-wrap: break-word;
132 | }
133 |
134 | b, strong {
135 | font-weight: bold;
136 | }
137 |
138 | dfn {
139 | font-style: italic;
140 | }
141 |
142 | ins {
143 | background: #ff9;
144 | color: #000;
145 | text-decoration: none;
146 | }
147 |
148 | mark {
149 | background: #ff0;
150 | color: #000;
151 | font-style: italic;
152 | font-weight: bold;
153 | }
154 |
155 | sub, sup {
156 | font-size: 75%;
157 | line-height: 0;
158 | position: relative;
159 | vertical-align: baseline;
160 | }
161 |
162 | sup {
163 | top: -0.5em;
164 | }
165 |
166 | sub {
167 | bottom: -0.25em;
168 | }
169 |
170 | ul, ol {
171 | margin: 1em 0;
172 | padding: 0 0 0 2em;
173 | }
174 |
175 | li p:last-child {
176 | margin-bottom: 0;
177 | }
178 |
179 | ul ul, ol ol {
180 | margin: .3em 0;
181 | }
182 |
183 | dl {
184 | margin-bottom: 1em;
185 | }
186 |
187 | dt {
188 | font-weight: bold;
189 | margin-bottom: .8em;
190 | }
191 |
192 | dd {
193 | margin: 0 0 .8em 2em;
194 | }
195 |
196 | dd:last-child {
197 | margin-bottom: 0;
198 | }
199 |
200 | img {
201 | border: 0;
202 | -ms-interpolation-mode: bicubic;
203 | vertical-align: middle;
204 | }
205 |
206 | figure {
207 | display: block;
208 | text-align: center;
209 | margin: 1em 0;
210 | }
211 |
212 | figure img {
213 | border: none;
214 | margin: 0 auto;
215 | }
216 |
217 | figcaption {
218 | font-size: 0.8em;
219 | font-style: italic;
220 | margin: 0 0 .8em;
221 | }
222 |
223 | table {
224 | margin-bottom: 2em;
225 | border-bottom: 1px solid #ddd;
226 | border-right: 1px solid #ddd;
227 | border-spacing: 0;
228 | border-collapse: collapse;
229 | }
230 |
231 | table th {
232 | padding: .2em 1em;
233 | background-color: #eee;
234 | border-top: 1px solid #ddd;
235 | border-left: 1px solid #ddd;
236 | }
237 |
238 | table td {
239 | padding: .2em 1em;
240 | border-top: 1px solid #ddd;
241 | border-left: 1px solid #ddd;
242 | vertical-align: top;
243 | }
244 |
245 | .author {
246 | font-size: 1.2em;
247 | text-align: center;
248 | }
249 |
250 | @media only screen and (min-width: 480px) {
251 | body {
252 | font-size: 14px;
253 | }
254 | }
255 | @media only screen and (min-width: 768px) {
256 | body {
257 | font-size: 16px;
258 | }
259 | }
260 | @media print {
261 | * {
262 | background: transparent !important;
263 | color: black !important;
264 | filter: none !important;
265 | -ms-filter: none !important;
266 | }
267 |
268 | body {
269 | font-size: 12pt;
270 | max-width: 100%;
271 | }
272 |
273 | a, a:visited {
274 | text-decoration: underline;
275 | }
276 |
277 | hr {
278 | height: 1px;
279 | border: 0;
280 | border-bottom: 1px solid black;
281 | }
282 |
283 | a[href]:after {
284 | content: " (" attr(href) ")";
285 | }
286 |
287 | abbr[title]:after {
288 | content: " (" attr(title) ")";
289 | }
290 |
291 | .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after {
292 | content: "";
293 | }
294 |
295 | pre, blockquote {
296 | border: 1px solid #999;
297 | padding-right: 1em;
298 | page-break-inside: avoid;
299 | }
300 |
301 | tr, img {
302 | page-break-inside: avoid;
303 | }
304 |
305 | img {
306 | max-width: 100% !important;
307 | }
308 |
309 | @page :left {
310 | margin: 15mm 20mm 15mm 10mm;
311 | }
312 |
313 | @page :right {
314 | margin: 15mm 10mm 15mm 20mm;
315 | }
316 |
317 | p, h2, h3 {
318 | orphans: 3;
319 | widows: 3;
320 | }
321 |
322 | h2, h3 {
323 | page-break-after: avoid;
324 | }
325 | }
326 |
--------------------------------------------------------------------------------
29 | 
30 |