CSS Deep Dive: CSS Animations

Disclaimer: this is not a CSS beginner class. You need to know HTML and CSS (functionality and syntax) to take this class.
Want to have super cool animated effects on your web pages without having to use JavaScript, gifs or videos? Well, look no further than this class, where you will get an introduction to the different types of CSS animations you can use. This class will cover the bases of animating for the web, including best practices, types of animations and syntax. We will then dive into "Transforms" and create a few simple animations. If time allows, we will create a more complex animation using what we have just learned at the end of the class.

Instructor:
Sandra Bermond | Innovation Co-Lab Program Manager
Sandra manages the Innovation Co-Lab roots program as well as teaches several workshops. She has a background in web design and front-end development, as well as a passion for artistic endeavors regardless of the medium.

This class will be hosted via Zoom. You will receive an email with the Zoom link a day before the class. Attendance will be taken and the session will be recorded.

 

About Course

Outline

  • What is CSS Animation?
  • Transitions & Transforms vs. Animations & Keyframes
  • Using Transitions and transforms to animate
  • Using Animations and Keyframes to animate
  • Animation of a button on hover

Objectives

  • Know about the existence of CSS animation and what you can do with it
  • Know when to use transforms vs. keyframes
  • Learn how to build an animation using transitions and transforms
  • Learn how to build an animation using animations and keyframes

Tools

The instructor recommends using Codepen for its ease of use and quick rendering, but any Code Editor and either Google Chrome or Firefox browsers will work just as well.

Files

Prerequisites

This class is not for beginners. We will not go over CSS syntax and functionalities.
You will need to have taken (or have the knowledge dispensed in) Web Development: CSS Basics, and it is recommended you have taken or watched the recordings of the Web Development: Responsive CSS and Web Development: Advanced CSS classes to follow this Animation class comfortably.

This class is part of our Web Development (Front End) Track

See the whole track

Suggested Courses