Animating with CSS
So we've designed two of our own icons. We've built them in Sketch. We've learned all about SVG. We now understand what types of animations are available and kind of a little bit about how to design an animation. Let's start building an animating icon. Let's dive into the CSS. So we're going to open up a cleaned-up version of the Color Swatches SVG. And what I did here is I created a group for the back-panel, a group for the mid-panel, and a group for the top-panel. And I just added a little bit of space in between these so that it's a little bit easier to read them. Otherwise, it's just the same SVG that we were working with and cleaning up prior to this. So I'll copy this. And let's open up a new CodePen. We'll paste this in as as HTML. And you'll notice the icon is over, off to the side a little bit. And that's because I went back into Sketch and increased the width of the artboard so that we can rotate these panels back the other way without them being clipped outside of the SVG vi...