Animations, Transitions and Transforms

Introduction

CSS3 offers a lot of interesting functionality in our sites. This functionality can really make our sites look special and unique. However be cautious of browser compatibility issues, since some of them aren’t supported in older browsers.

Learning Objectives

  • How to round corners of a box
  • How to add a shadow to a box
  • Animations
  • What pseudo-elements are and what they are useful for
  • Adding and customizing transitions
  • Transforming, Scaling and Rotating an Element
  • How to use CSS Variables

Study

  1. Watch this Recorded session

  2. Read about CSS Transitions, stop at the Javascript section.

  3. Peruse through these CSS Animated Loading Icons for some animation inspiration.

  4. Glance at canIuse, a compatibility table for various elements in CSS and HTML5.

  5. W3Schools on Border Radius

  6. W3Schools on Box Shadow

  7. W3Schools on Transforms

  8. Using ::before and ::after Pseudo-Elements and a bunch of cool things they can be used for

  9. MDN Web Docs on Animation

Interactive Screencasts

Watch one of these series of interactive screencasts at Scrimba and The Net Ninja to learn more about CSS Transitions, Transforms and Animations.

Total duration is about 2 hours, but you should add another 2 hours for practicing the concepts on your own code.

Additional Resources

In this section you can find a lot of helpful links to other content. This is a supplemental material for you if you want to dive deeper into some concepts.

  • Go through the Intro to CSS 3D Transforms tutorial and learn how to create amazing 3D effects like the one below. If you like this tutorial, don’t forget to star the author’s repo here.
  • Make sure to check out this amazing Interactive Transform Viewer and play around with the different CSS transforms.
  • If you really like 3D, then this article will definitely satisfy your apetite for CSS 3D effects!

Leave a Reply