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.
Peruse through these CSS Animated Loading Icons for some animation inspiration.
Glance at canIuse, a compatibility table for various elements in CSS and HTML5.
Watch these series of interactive screencasts at Scrimba to learn more about CSS
Total duration is about 2 hours, but you should add another 2 hours for practicing the concepts on your own code.
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 )
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 )
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 )
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! 🙂