What you'll learn:
- Create 2D web animations of any kind
- Create animation effects for your web games
- Create cool website effects rotating buttons, multi-color changing elements, moving element animations, etc.
- Create animations for your clients' websites and web apps
- Create keyframe animations
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 Animationsyntaxes, and you'll be creatingawesome web effectsandkeyframe animationsin no time at all!
Anyone can become a web animator now.
Note :Course Languages: Urdu/Hindi
How is this course designed?
Our course has 4 Section, where each module will thoroughly explain the intricacies of one of the concepts in CSSAnimations with a wealth of over-the-shoulder examples.
Section 1 - Transformations
Section 2. Transition Animations in CSS3
Section 3. Keyframe animations in CSS3 + 1 mini project
Section 4. Projects
Examples and projects:-
Animated button Animated coloredbox Moving ball animation mini project
This Course Is Apply in -
Freelance web developer/designer
web apps and web pages
Animated scenes - Moving balls, Bouncing balls
web games more interactive
What will you learn in ourcourse?
Course Content
Section 1. Transforming your website's elements using CSS
1. Section Introduction
2. Translating elements using CSS3
3. Translating elements using CSS3 Part 2 CSS3 Prefixes
4. Translating elements using CSS3 Part 3
5. Rotating elements using CSS3
6. Rotating elements using CSS3 - part 2
7. Scaling elements using CSS3
8. Skewing elements using CSS3
9. Matrix property
10. Adding multiple transformations effects to a single element
Section 2. Transition Animations in CSS3
1. Section Introduction
2. Creating basic transitions
3. Change more than one property or style during a transition
4. Using transformations with transitions
5. Delaying a transition
6. Apply speed curves to your transition
7. Transition shorthand
Section 3. Keyframe animations in CSS3 + 1 mini project
1. Section Introduction
2. Creating a keyframe
3. Keyframes with percentages -multiple intermediate states
4. Multiple animationstyle changes with one keyframe
5. Delaying the keyframe animation
6. Specifying the number of times the animation should repeat
7. Speed curve of the keyframe animation
8. Speed curve - Cubic Bezier funtion
9. Mini project - Moving ball animation part 1
10. Mini project - Moving ball animation - part 2
11. Direction of the animation
12. Pausing or running the animation
13. Animation fill mode property
14. Animation shorthand property
15. Applying multiple animations
keyframes on one element
Section 4. Projects
1. HTML5 building blocks of the fish tank animation
2. Finish designing the fish tank animation web page
3. Animate the fishes using keyframes
4. Animate the bubbles using keyframes
5. Project #2 - Card Flipping Project
So, what are you waiting for?Enroll nowand embark into thewonderful world of CSS aimations.
