by Aarthi Elumalai | Publisher: Packt Publishing | Release Date: February 2019 | ISBN: 9781838646172

Create 2D Animation with CSS animations (CSS3 methods), interactive examples & projects - hands-on beginner trainingAbout This VideoWe like to be thorough in our teaching. You'll find everything you need to start creating awesome 2D animations in this course. You won't have to look anywhere else.We strongly advocate learning by doing, rather than just listening or reading.In DetailWhen you hear the term 2D Animation, especially web animations, you probably imagine complicated Javascript codes, Flash or other hard-to-learn proprietary software programs. That's how it was until a few years ago. You had to spend days, or months mastering complicated software or learning a lot of syntaxes until you could create decent web animations. But no more! CSS3, and along with it, CSS Animations were released a few years ago, and they've have made your learning process MUCH easier. If you know the very basics of HTML and CSS, which anyone who has anything to do with coding/web design does, you're all set. Spend a few hours learning a bunch of CSS3 Animation syntaxes, and you'll be creating awesome web effects and keyframe animations in no time at all! Anyone can become a web animator now. Our course has 3 modules, where each module will thoroughly explain the intricacies of one of the concepts in CSS Animations with a wealth of over-the-shoulder examples. Here are the modules:Module 1 - Transformations - This is the foundation's module. You'll learn how to manipulate your web elements in this module. You'll learn how to move the elements around the web page, rotate them to any angle you want, resize them, skew them and so much more.Module 2 - Transition animations - You'll learn how to smoothly transition an element from one state to another in here, so it looks like an animation. Change it's colors, size, position, stylings and so much more based on the conditions you give. You'll also learn to customize the transition animations by delaying them, changing the speed of the animation, changing the duration of the animation and so much more.Module 3 - Keyframe animations - A bigger and more important concept. In here, you'll learn how to create frames that depict every single animation you want to be applied to your web elements. In the duration of the animation, you'll be able to perform multiple changes to your element. Learn how to give the illusion of movement to create high class animated scenes. Learn how to create real-world 2D animation effects by using the various properties and features available in keyframe animations. All the code and supporting files for this course are available at: https://github.com/PacktPublishing/2D-Animation-with-CSS-Animations---Complete-course-and-projectDownloading the example code for this course: You can download the example code files for all Packt video courses you have purchased from your account at http://www.PacktPub.com. If you purchased this course elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.

1. Chapter 1 : Introduction
   • Introduction 00:04:14
2. Chapter 2 : Transforming your website's elements using CSS
   • Transformations introduction 00:01:30
   • Translating elements using CSS3 00:09:28
   • Translating elements using CSS3 - part2 00:09:22
   • Translating elements using CSS3 - part 3 00:09:05
   • Rotating elements using CSS3 00:09:50
   • Rotating elements using CSS3 - part 2 00:10:24
   • Scaling elements using CSS3 00:09:16
   • Skewing elements using CSS3 00:10:30
   • Matrix property 00:07:54
   • Adding multiple transformations effects to a single element 00:05:55
3. Chapter 3 : Transition Animations in CSS3
   • Transition animations introduction 00:02:01
   • Creating basic transitions 00:10:44
   • Change more than one property or style during a transition 00:08:07
   • Using transformations with transitions 00:06:32
   • Delaying a transition 00:06:49
   • Apply speed curves to your transition 00:08:47
   • Transition shorthand 00:07:50
4. Chapter 4 : Keyframe animations in CSS3 + 1 mini project
   • Keyframe animations introduction 00:02:01
   • Creating a keyframe 00:11:36
   • Keyframes with percentages - multiple intermediate states 00:05:03
   • Multiple animation/style changes with one keyframe 00:08:44
   • Delaying the keyframe animation 00:07:36
   • Specifying the number of times the animation should repeat 00:03:51
   • Speed curve of the keyframe animation 00:11:01
   • Speed curve - Cubic Bezier function 00:05:38
   • Mini project - Moving ball animation - part 1 00:08:09
   • Mini project - Moving ball animation - part 2 00:06:26
   • Direction of the animation 00:06:16
   • Pausing or running the animation 00:07:02
   • Animation fill mode property 00:10:45
   • Animation shorthand property 00:05:21
   • Applying multiple animations/keyframes on one element 00:07:33
5. Chapter 5 : Projects - Fish Tank Animation, Card flipping & more
   • HTML5 building blocks of the fish tank animation 00:07:58
   • Finish designing the fish tank animation web page 00:13:12
   • Animate the fishes using keyframes 00:08:02
   • Animate the bubbles using keyframes 00:05:23
   • Project #2 - Card Flipping Project 00:13:46