Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Web and personalized recommendations.Start Your Free Trial Now
- View Offline
- Understanding delay and fill-mode
- Dictating an animation's direction
- Using easing
- Adding keyframes
- Looping an animation
- Chaining multiple animations on one element
- Setting up the HTML structure
Skill Level Intermediate
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.