Animations, Transitions and Transforms (v1)

Introduction

CSS3 offers a whole lot of interesting functionality that you didn’t know about but will really help you make your sites into something special. Just be conscious of browser compatibility issues — some of these aren’t available on older browsers.

Learning Objectives

  • How do you round corners of a box?
  • How do you add a shadow to a box?
  • What interesting animations can you use in CSS3?
  • What are pseudo-elements and what are they useful for?
  • Adding and customizing transitions
  • Transforming, Scaling and Rotating an Element
  • Learn how to use CSS Variables

Study

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

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

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

  4. W3Schools on Border Radius

  5. W3Schools on Box Shadow

  6. W3Schools on Transforms

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

  8. MDN Web Docs on Animation

Interactive Screencasts

Watch these series of interactive screencasts at Scrimba 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.

Transitions

Take at least a 15-minute break before moving to the next section.

Animations

Take at least a 15-minute break before moving to the next section.

Transforms

Resources

  • 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!

We need your contribution: can you help us improve the content and help other students also? If you decide to go through the Intro to CSS 3D Transforms tutorial, please give us your feedback. Was it hard or easy to follow? How much time did it take you to go through the tutorial? Do you have some code to share? You can leave your feedback in the comments section below. We love you! 🙂

front
right
back
left
top
bottom
LOOKING FOR HELP?

When looking for help, try doing so in the following order:

  • Did you try everything you could?
  • Did you read the documentation?
  • Did you Google for it?
  • Did you post your question on Slack/Forum?
  • Did you ask your fellow students for help?
  • Did you ask your Mentors for help?
  • Did you leave a comment on the comments section of this page?
  • Did you ask your Instructor for help?
    • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
    • Is it urgent? Did you try reaching him on Slack

UPDATED: 19.02.2021

CONTRIBUTORS:

Feedback

  • Is there anything we can help with up to this point? Do you have something to suggest about this chapter? Let us know in the comments below.