Viewers: in countries Watching now:
This course presents a short series of CSS animation techniques, such as looping, playing, and pausing, and puts them together in a small project: an animated infographic. Author Val Head also addresses using CSS preprocessors, adding transitions, handling vendor prefixes, and understanding the best uses for CSS animations. Plus, discover how to measure the performance and current level of browser support for CSS animations and how we can expect the technology to change.
The web design community is full of helpful people, and because of that we've got a lot of great online tools to help you create CSS animations. We've touched on some of these tools throughout the course, so here's the full list of the ones I find the most useful. CSS3Please and CSS3Generator are wonderful online tools for generating correct animation code and previewing what it might look like. Both allow you to edit values live on the page. For example, things like your duration, and actually see the results live after you type them.
Once you've got something you like, you can just copy and paste the code snippet and use it however you'd like. CSS3Generator works in a similar way, but you just first need to pick what you want to work from, from their list, and then it gives you a series of options to work with. The two best tools out there for generating your own cubic Bezier functions for easing and timing functions are Ceaser and cubic-bezier.com. Ceaser allows you to pick from a list of common presets based on things like the popular Penner Easing Equations as well as others. And you can also edit the graph yourself for custom results.
So we can pick from this entire list of presets and also edit the handles to create our own curve. I use Ceaser the most when I have a particular type of motion in mind, and I'm looking for the equation that will help to find it the best. Cubic-bezier.com doesn't have as many preview options, but it does give you the ability to compare the easing results from two different graphs, which is really helpful. In this example, I would be comparing the ease keyword graph against the linear keyword graph. I can just hit GO and see how they would work against each other.
You can also create custom graphs here and then bookmark them for sharing with your team later. That's very handy. And then there is the URL that reflects the same numbers I have up here, and that's how you can bookmark them. If you hate working from a blank slate as much as I do, there are tools like animate.css and animatable to help you start with something more than just a blank file. Animate.css is both a live demo and a downloadable library with CSS animation presets that you can use in your own projects. The best way to use these is at the starting point.
Find one that's close to the effect that you want to create and edit it to fit what you have in mind. Tweaking some existing code is often easier than starting from scratch. Animatable is a visual and functional account of the CSS properties that can be animated. It's a long list, but the site is a lot more fun than just reading the W3C spec. Last, but certainly not least, if you're ever curious about the proper use of animation syntax or the reasoning behind any of it, CSS tricks and the W3C spec are where to go.
It's true that the W3C spec on animations is a very dry read, but the in-depth explanations behind the spec are pretty useful. For friendlier explanations, CSS tricks have been covered. There's an entire section in the Almanac on animations and many of the post include tips on using animations and other CSS3 properties in the real world. These sites are all ones that I use regularly when working on a project with animations, and I hope you find them helpful too.
There are currently no FAQs about CSS: Animations.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.