Description

Create 2D Animation with CSS animations (CSS3 methods), interactive examples & projects - hands-on beginner training

When 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-project

What You Will Learn

Create 2D web animations of any kind
Create animations for your and your clients websites and web apps
Create keyframe animations that can be used in web animation films and videos
Create animation effects that can be used in your web games
Create cool website effects like rotating buttons, multi-color changing elements, moving element animations, etc.

Audience

This course is for anyone who wants to learn how to create web animations, an easy shortcut to creating an awesome website and web game animations and to learn how to create transforms, transitions and keyframes like the pros do.

Approach

If you follow along with our examples in our over-the-shoulder training and create the effects along with us, you'll be confident in embarking on the world of 2D web animations by the time you finish our course. You'll be able to confidently add this as a skill in your resume.

Key Features

1. We 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. * 2. We strongly advocate learning by doing, rather than just listening or reading.

Github Repo

https://github.com/packtpublishing/2d-animation-with-css-animations---complete-course-and-project

About the Author

Aarthi Elumalai

Aarthi Elumalai is the founder of DigiFisk. At DigiFisk, they aim to make programming fun and interactive. If you are tired of endless theories, you have come to the right place. Starting with beginner-level courses in any programming language or field, they guide you to advance with several real-world project-based classes to equip you to thrive in the real world. Their lectures tend to be detailed and leave nothing out, so beginners and advanced programmers alike can learn something from each course. Be sure to enjoy your journey into the fascinating world of programming with DigiFisk.

Course Outline

1. Introduction

Introduction: Introduction

2. Transforming your website's elements using CSS

1. Transformations introduction

Transforming your website's elements using CSS: Transforming your website's elements using CSS

2. Translating elements using CSS3

Transforming your website's elements using CSS: Translating elements using CSS3

3. Translating elements using CSS3 - part2

Transforming your website's elements using CSS: Translating elements using CSS3 - part2

4. Translating elements using CSS3 - part 3

Transforming your website's elements using CSS: Translating elements using CSS3 - part 3

5. Rotating elements using CSS3

Transforming your website's elements using CSS: Rotating elements using CSS3

6. Rotating elements using CSS3 - part 2

Transforming your website's elements using CSS: Rotating elements using CSS3 - part 2

7. Scaling elements using CSS3

Transforming your website's elements using CSS: Scaling elements using CSS3

8. Skewing elements using CSS3

Transforming your website's elements using CSS: Skewing elements using CSS3

9. Matrix property

Transforming your website's elements using CSS: Matrix property

10. Adding multiple transformations effects to a single element

Transforming your website's elements using CSS: Adding multiple transformations effects to a single element

3. Transition Animations in CSS3

1. Transition animations introduction

Transition Animations in CSS3: Transition animations introduction

2. Creating basic transitions

Transition Animations in CSS3: Creating basic transitions

3. Change more than one property or style during a transition

Transition Animations in CSS3: Change more than one property or style during a transition

4. Using transformations with transitions

Transition Animations in CSS3: Using transformations with transitions

5. Delaying a transition

Transition Animations in CSS3: Delaying a transition

6. Apply speed curves to your transition

Transition Animations in CSS3: Apply speed curves to your transition

7. Transition shorthand

Transition Animations in CSS3: Transition shorthand

4. Keyframe animations in CSS3 + 1 mini project

1. Keyframe animations introduction

Keyframe animations in CSS3 + 1 mini project: Keyframe animations introduction

2. Creating a keyframe

Keyframe animations in CSS3 + 1 mini project: Creating a keyframe

3. Keyframes with percentages - multiple intermediate states

Keyframe animations in CSS3 + 1 mini project: Keyframes with percentages - multiple intermediate states

4. Multiple animation/style changes with one keyframe

Keyframe animations in CSS3 + 1 mini project: Multiple animation/style changes with one keyframe

5. Delaying the keyframe animation

Keyframe animations in CSS3 + 1 mini project: Delaying the keyframe animation

6. Specifying the number of times the animation should repeat

Keyframe animations in CSS3 + 1 mini project: Specifying the number of times the animation should repeat

7. Speed curve of the keyframe animation

Keyframe animations in CSS3 + 1 mini project: Speed curve of the keyframe animation

8. Speed curve - Cubic Bezier function

Keyframe animations in CSS3 + 1 mini project: Speed curve - Cubic Bezier function

9. Mini project - Moving ball animation - part 1

Keyframe animations in CSS3 + 1 mini project: Mini project - Moving ball animation - part 1

10. Mini project - Moving ball animation - part 2

Keyframe animations in CSS3 + 1 mini project: Mini project - Moving ball animation - part 2

11. Direction of the animation

Keyframe animations in CSS3 + 1 mini project: Direction of the animation

12. Pausing or running the animation

Keyframe animations in CSS3 + 1 mini project: Pausing or running the animation

13. Animation fill mode property

Keyframe animations in CSS3 + 1 mini project: Animation fill mode property

14. Animation shorthand property

Keyframe animations in CSS3 + 1 mini project: Animation shorthand property

15. Applying multiple animations/keyframes on one element

Keyframe animations in CSS3 + 1 mini project: Applying multiple animations/keyframes on one element

5. Projects - Fish Tank Animation, Card flipping & more

1. HTML5 building blocks of the fish tank animation

Projects - Fish Tank Animation, Card flipping & more: HTML5 building blocks of the fish tank animation

2. Finish designing the fish tank animation web page

Projects - Fish Tank Animation, Card flipping & more: Finish designing the fish tank animation web page

3. Animate the fishes using keyframes

Projects - Fish Tank Animation, Card flipping & more: Animate the fishes using keyframes

4. Animate the bubbles using keyframes

Projects - Fish Tank Animation, Card flipping & more: Animate the bubbles using keyframes

5. Project #2 - Card Flipping Project

Projects - Fish Tank Animation, Card flipping & more: Project #2 - Card Flipping Project

Course Images

2D Animation with CSS Animations - Complete course and Project

By Packt

Booking options

Highlights