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.
Let's start by taking a closer look at the HTML and CSS structure behind our infographic. We have three main files making up our markup in CSS, the index.html, base.css, and styles.css files. I'll go through our HTML first. At the very top of the file, we have a couple of lines here to include Typekit, which I mentioned in the last tutorial is optional. Continuing down to our HTML structure, we have one div that's containing our entire infographic. Then we have a header section holding our title and our coffee cup animation.
But feel free to poke around if you're curious of what I have in here. Moving to our styles.css, this is where the bulk of the CSS we'll actually be working with is. At the very top, we have an import line importing our base.css and then right below that I have a little comment with all my colors that I'll be using. I like to keep those handy. But our styles.css file is sectioned out mostly by the section on the infographic. For example, we have all our styles for our header right here at the top, then further down the styles for our nav, then the styles for our drink profiles, and so on.
We'll mostly be dealing with the header section, the profile section, and of course adding an animation section. So let's take a look at that in the next tutorial.
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.