So, you’ve learned the basics of what web animation is and why you should be doing it, and now it’s time to wonder how you actually create these kinds of animations for the web. Of course, there are ways to create stunning and complex animations using programs like Adobe AfterEffects, but this isn’t a guide on how to create cartoons. Because flUX is a guide for web animation, all of our lessons will focus on how you can create animations using code.
There’s not just one way to create a web animation, so first we’re going to break it down with an explanation of different techniques and how to choose what you need. Some are pretty simple to invoke, while others are more complicated. Each has a time and a place.
The simplest. Point A to Point B. But, they require a triggering event to run. They’re the easiest and most lightweight to work with.
Overall, CSS animations offer more control. They allow you to define a series of states throughout the animation, instead of just a start or an end. You can loop animations and make them run forwards or backwards. They can run without a trigger, but you can use one if you need to.
“Transitions are quicker and easier to work with, and animations give you more control. That’s the main thing to keep in mind when choosing between the two.” -Steven Bradley, AdobePress
SVG Animations are a kind of CSS animation that allow you to control an SVG line drawing. Using this animation strategy, you can create effects like a line or text being drawn onto the page, or a looping effect. As long as you have a prior understanding of CSS Animations and
SVG Animations can be striking, but they will probably be the most infrequently used part of your animation toolbox.