In order to do animations we will need something to animate. So let's move into Adobe Illustrator where we can create a basic flat design SVG for which we can use for our animation. In this case, I am going for a simple coffee cup. From there on we will need another SVG image that will get an animated effect. Let's settle with a steam effect for the coffee cup. The image above will be our steam effect (look past the blue background). So now that we have two different pictures, we can start with the animation. But first, we will have to export these two images as .png images, and that without any backgrounds (the blue background). From there on out, let's create a HTML page, a CSS document and import a CSS animation library. Let's call the HTML page index.html and the CSS document for main.css. For our imported CSS animation library, we will use a library called Animate.css (version 3.7.2), which is great for quick animations. Though, I will override some