CSS Animation with Transition and Transform

This course will show developers and designers how to add interactivity to a web page with the CSS transition and transform properties. The course includes extensive demonstrations from simple to complex, which aide us as we learn to create great visual effects.
Course info
Rating
(173)
Level
Beginner
Updated
Jul 16, 2015
Duration
2h 10m
Table of contents
Description
Course info
Rating
(173)
Level
Beginner
Updated
Jul 16, 2015
Duration
2h 10m
Description

In CSS Animation with Transition and Transform, you will learn to bring life to your web page and create a great user experience with only the use of CSS.

About the author
About the author

Sandy is a passionate and experienced interface designer, developer, and digital entrepreneur hailing from Toronto, in Ontario, Canada. She specializes in front-end development with HTML, CSS, CSS3 Animation, Javascript, JQuery, Sass, and Less.

Section Introduction Transcripts
Section Introduction Transcripts

CSS Transition Fundamentals
Hello everyone. My name is Sandy, I'm a web developer and designer. I'd like to welcome you to CSS Animation with Transition and Transform. In this course I will show you how to add interactivity to your work page and how to create nice animation effects with CSS only by using CSS Transition and CSS Transform like this example where you can animate color changes or where you can transform HTML elements by moving them and rotating them. In this class you'll be introduced to the CSS Transitions Properties, the 2D and 3D Transform methods, as well as the CSS Vendor Prefixes to make sure that your interactive design can work across browser and here how the course is broken down. We're going to start off with a presentation of the CSS Transitions basics to understand how transition works in web design. We're going to continue in the next module with 2D Transform to learn how to manipulate and animate HTML elements in a 2-dimensional space. Then we're going to take it to the next level with CSS 3D animation and each module will be supported with fun tutorials to put all of it in practice. Finally, we're going to complete the class with a final project. Together we're going to add elegant transition and animation effects to a single page. That's going to be the opportunity for you to apply everything that you've learned. By the end of the class you will understand how to create an enhanced user experience to impress your audience, so I am very excited to show you how to make your web pages more fun with CSS, so let's get started with CSS Animation with Transition and Transform. Thank you for joining.

Final Project - Whistler White Ski Resort
Welcome to the final part of this class. The Final Project. So this is Whistler White Ski Resort, so our task will be to customize a webpage, create a great user experience with transition effects, so together we're going to use the transition properties in order to add interactivity. We're going to use 2D and 3D transition. What we're going to do is animating the navigation links, supply multiple transition effects, and also we're going to add interactivity to these gallery pictures with 3D animation and all of that with CSS only.