2D Animation with CSS Animations – Complete course, project
2D Animation with CSS Animations – Complete course, project, available at $19.99, has an average rating of 4.3, with 45 lectures, based on 46 reviews, and has 744 subscribers.
You will learn about 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. This course is ideal for individuals who are If you want to learn how to create web animations or If you want to learn an easy shortcut to creating awesome website and web game animations or If you want to learn how to create transforms, transitions and keyframes like the pros do It is particularly useful for If you want to learn how to create web animations or If you want to learn an easy shortcut to creating awesome website and web game animations or If you want to learn how to create transforms, transitions and keyframes like the pros do.
Enroll now: 2D Animation with CSS Animations – Complete course, project
Summary
Title: 2D Animation with CSS Animations – Complete course, project
Price: $19.99
Average Rating: 4.3
Number of Lectures: 45
Number of Published Lectures: 45
Number of Curriculum Items: 45
Number of Published Curriculum Objects: 45
Original Price: $199.99
Quality Status: approved
Status: Live
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.
Who Should Attend
- If you want to learn how to create web animations
- If you want to learn an easy shortcut to creating awesome website and web game animations
- If you want to learn how to create transforms, transitions and keyframes like the pros do
Target Audiences
- If you want to learn how to create web animations
- If you want to learn an easy shortcut to creating awesome website and web game animations
- If you want to learn how to create transforms, transitions and keyframes like the pros do
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 syntax until you could create decent web animations.
But no more!
CSS3, and along with it, CSS Animationswere 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.
What will you learn in our course?
1. How to manipulateevery single web element of your website – change it’s shape, size, position, angle and so much more.
2. How to create slick animations and transition effects for your web pages – rotating buttons, boxes that automatically change color and size, web elements that move around the web page based on the conditions you give, etc etc.
3. How to create frame by frame of every single animation effect you want – a ball that moves around your given path, multiple color changes within a specific moving cars,
4. How to time your animations, delay them, repeat them a certain number of times (even infinite), give multiple states to them, give them custom speeds, etc.
and so much more!
Where can you apply what you learn from our course?
1. If you’re a freelance web developer/designer, dazzle your clients with animated poups, animated buttons, color changing text and a lot more cool effects like these on your web apps and web pages.
2. Do you want to create animated scenes? Moving balls, bouncing balls, a scene that depicts a trafficked road…you can do all of that and more by learning how to work with keyframe animations in CSS.
3. Make your web games more interactiveand fun to play by creating awesome transitions and keyframe animations on your characters and game environment.
As I said, sky is the limit! You can apply what you learn here anywhere in the web space, in any sphere.
Your imagination is your only obstacle to how you can animate your web elements with what you learn here.
How is this course designed?
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 foundations 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 anotherin 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 applied to your web elements. In the duration of the animation, you’ll be able to perform multiple changes to your element (multiple style changes, position changes etc). 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.
We also cover a lot of examples and projects, like:
1. Animated button that rotates, changes between 2 colors and increases or decreases when hovered on (Transition module).
2. Animated colored boxthat alternates between different widths and heights and changes between 4-5 colors in the duration of the animation (Keyframe module).
3. Moving ball animation mini project – A ball that moves along the inner edges of the ball repeatedly while changing colors, and stops when hovered or clicked on (keyframe module).
Why should you choose our course?
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. Our lectures are filled with a wealth of examples that explain every concept clearly.
3. If you follow along with our examples in our over-the-shoulder trainings, 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.
4. We prefer creating fun projects to explain the concepts and to keep things interesting as well. You’ll learn how to apply the concepts you learn in the course in these mini projects and examples.
So, what are you waiting for? Enroll now and embark into the wonderful world of CSS aimations.
Course Curriculum
Chapter 1: Introduction
Lecture 1: Introduction
Chapter 2: Transforming your website's elements using CSS
Lecture 1: Transformations introduction
Lecture 2: Translating elements using CSS3
Lecture 3: Translating elements using CSS3 – part2
Lecture 4: Translating elements using CSS3 – part 3
Lecture 5: Rotating elements using CSS3
Lecture 6: Rotating elements using CSS3 – part 2
Lecture 7: Scaling elements using CSS3
Lecture 8: Skewing elements using CSS3
Lecture 9: Matrix property
Lecture 10: Adding multiple transformations effects to a single element
Lecture 11: Transformation demo files
Chapter 3: Transition Animations in CSS3
Lecture 1: Transition animations introduction
Lecture 2: Creating basic transitions
Lecture 3: Change more than one property or style during a transition
Lecture 4: Using transformations with transitions
Lecture 5: Transition example #1 – button
Lecture 6: Delaying a transition
Lecture 7: Apply speed curves to your transition
Lecture 8: Transition example #2 – speed curve
Lecture 9: Transition shorthand
Chapter 4: Keyframe animations in CSS3 + 1 mini project
Lecture 1: Keyframe animations introduction
Lecture 2: Creating a keyframe
Lecture 3: Keyframes with percentages – multiple intermediate states
Lecture 4: Multiple animation/style changes with one keyframe
Lecture 5: Delaying the keyframe animation
Lecture 6: Specifying the number of times the animation should repeat
Lecture 7: Speed curve of the keyframe animation
Lecture 8: Speed curve – Cubic Bezier funtion
Lecture 9: Mini project – Moving ball animation – part 1
Lecture 10: Mini project – Moving ball animation – part 2
Lecture 11: Direction of the animation
Lecture 12: Pausing or running the animation
Lecture 13: Animation fill mode property
Lecture 14: Animation shorthand property
Lecture 15: Applying multiple animations/keyframes on one element
Lecture 16: Keyframes example #1 – box animation code
Lecture 17: Mini project code files
Chapter 5: Projects – Fish Tank Animation, Card flipping & more
Lecture 1: HTML5 building blocks of the fish tank animation
Lecture 2: Finish designing the fish tank animation web page
Lecture 3: Animate the fishes using keyframes
Lecture 4: Animate the bubbles using keyframes
Lecture 5: Project #2 – Card Flipping Project
Chapter 6: Conclusion
Lecture 1: Projects and examples you could try out
Lecture 2: Conclusion & Bonus – Continue your journey!!
Instructors
-
DigiFisk (Programming is fun)
Hands-on practical training | Programming courses
Rating Distribution
- 1 stars: 0 votes
- 2 stars: 0 votes
- 3 stars: 6 votes
- 4 stars: 9 votes
- 5 stars: 31 votes
Frequently Asked Questions
How long do I have access to the course materials?
You can view and review the lecture materials indefinitely, like an on-demand channel.
Can I take my courses with me wherever I go?
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!
You may also like
- Top 10 Video Editing Courses to Learn in November 2024
- Top 10 Music Production Courses to Learn in November 2024
- Top 10 Animation Courses to Learn in November 2024
- Top 10 Digital Illustration Courses to Learn in November 2024
- Top 10 Renewable Energy Courses to Learn in November 2024
- Top 10 Sustainable Living Courses to Learn in November 2024
- Top 10 Ethical AI Courses to Learn in November 2024
- Top 10 Cybersecurity Fundamentals Courses to Learn in November 2024
- Top 10 Smart Home Technology Courses to Learn in November 2024
- Top 10 Holistic Health Courses to Learn in November 2024
- Top 10 Nutrition And Diet Planning Courses to Learn in November 2024
- Top 10 Yoga Instruction Courses to Learn in November 2024
- Top 10 Stress Management Courses to Learn in November 2024
- Top 10 Mindfulness Meditation Courses to Learn in November 2024
- Top 10 Life Coaching Courses to Learn in November 2024
- Top 10 Career Development Courses to Learn in November 2024
- Top 10 Relationship Building Courses to Learn in November 2024
- Top 10 Parenting Skills Courses to Learn in November 2024
- Top 10 Home Improvement Courses to Learn in November 2024
- Top 10 Gardening Courses to Learn in November 2024