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
Read about CSS Transitions, stop at the Javascript section.
Peruse through these CSS Animated Loading Icons for some animation inspiration.
Glance at canIuse, a compatibility table for various elements in CSS and HTML5.
Using
::beforeand::afterPseudo-Elements and a bunch of cool things they can be used for
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
Course Overview ( 5 minutes )
Project Navigation ( 2 minutes )
What are Transitions? ( 2 minutes )
Adding Transitions ( 6 minutes )
Customizing Transitions ( 6 minutes )
Transition Shorthand ( 3 minutes )
Transition Challenge ( 4 minutes )
Real-World Transitions Challenge: Menu ( 5 minutes )
Take at least a 15-minute break before moving to the next section.
Animations
Animations in Action ( 2 minutes )
Defining Animations ( 8 minutes )
Animations: Timing ( 4 minutes )
Animations: Other Properties ( 7 minutes )
Animation Shorthand ( 4 minutes )
Animation Challenge ( 4 minutes )
Real-World Animations Challenge: Landing Page ( 7 minutes )
Take at least a 15-minute break before moving to the next section.
Transforms
Introductions to Transforms & Scaling ( 7 minutes )
Translation ( 5 minutes )
Rotation ( 4 minutes )
Skew ( 3 minutes )
Transform Challenge ( 6 minutes )
Real-World Transforms Challenge: Logo ( 9 minutes )
Prefixes ( 7 minutes )
CSS Variables ( 5 minutes)
Custom Timing Functions ( 9 minutes )
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!