Mastering CSS Animation with SVG

Focused View

Jayanta Sarkar

7:41:44

68 View

1 - Introduction

1 - SVG Introduction Tutorial.mp4

04:12

1 - Which of the following is true about SVG.html

2 - Include SVG in HTML CSS Tutorial

2 - Include SVG in HTML CSS Tutorial.mp4

06:35

2 - image.zip

2 - index.html

3 - SVG ViewPort & ViewBox Tutorial

3 - SVG ViewPort & ViewBox Tutorial.mp4

08:46

3 - image.zip

3 - index.html

4 - SVG Elements

4 - SVG Line Element Tutorial.mp4

05:33

4 - index.html

5 - SVG Rect Element Tutorial.mp4

05:21

5 - index.html

6 - SVG Circle Element Tutorial.mp4

02:54

6 - index.html

7 - SVG Ellipse Element Tutorial.mp4

02:54

7 - index.html

8 - SVG Polyline Element Tutorial.mp4

04:35

8 - index.html

9 - SVG Polygon Element Tutorial.mp4

02:49

9 - index.html

5 - SVG Path Element Tutorial

10 - SVG Path Element Tutorial 1.mp4

06:15

10 - index.html

11 - SVG Path Element Tutorial II.mp4

09:57

11 - index.html

12 - SVG Path Element Tutorial III.mp4

07:17

12 - index.html

6 - SVG Text And Image Element Tutorial

13 - SVG Text Element Tutorial.mp4

08:22

13 - index.html

14 - SVG Image Element Tutorial.mp4

04:11

14 - index.html

7 - SVG Properties Tutorial

15 - SVG Stroke Properties Tutorial.mp4

11:22

15 - index.html

16 - SVG Fill Properties Tutorial.mp4

03:46

16 - index.html

17 - SVG Grouping Elements Tutorial.mp4

03:04

17 - index.html

18 - SVG Defs Symbol & Use Elements Tutorial.mp4

06:19

18 - index.html

19 - SVG TextPath Element Tutorial.mp4

04:38

19 - index.html

20 - SVG linear Gradients Element Tutorial.mp4

07:34

20 - index.html

21 - SVG Radial Gradient.mp4

05:35

21 - part2.html

8 - Adobe illustrator to SVG Graphic

22 - Adobe illustrator to SVG Graphic.mp4

07:33

23 - SVG ClipPath Element Tutorial.mp4

05:09

9 - SVG Filter

24 - SVG Filter Intro.mp4

03:23

25 - 01.zip

25 - SVG Filter implementation.mp4

06:30

25 - index.html

10 - Adding JavaScript in svg image

26 - Adding JavaScript in svg image.mp4

04:33

26 - index.html

11 - CSS Filter Tutorial

27 - CSS Filter Tutorial.mp4

06:40

27 - image.zip

27 - index.html

28 - CSS Filter Tutorial Part 2.mp4

05:16

12 - CSS Transition Tutorial

29 - CSS Transition Tutorial.mp4

07:21

29 - index.html

30 - CSS Transition Timing Function Tutorial.mp4

07:48

30 - index.html

31 - CSS Transition Delay Tutorial.mp4

03:25

31 - index.html

13 - CSS Transform 2D

32 - CSS Transform 2D Intro.mp4

05:23

32 - demo.html

32 - index.html

33 - CSS Transform 2D Scale.mp4

03:49

33 - index2.html

34 - CSS Transform 2D Skew.mp4

07:06

34 - index3.html

35 - CSS Transform 2D Matrix.mp4

04:30

35 - index4.html

14 - CSS Transform 3D Tutorial

36 - CSS Transform 3D Tutorial.mp4

10:26

36 - demo.html

36 - index.html

37 - CSS Transform 3D Tutorial Translate.mp4

04:11

37 - index.html

38 - CSS Transform 3D Tutorial Scale.mp4

03:47

38 - index.html

15 - CSS Perspective Tutorial

39 - CSS Perspective Tutorial.mp4

07:47

39 - index.html

16 - CSS TransformStyle Tutorial

40 - CSS TransformStyle Tutorial.mp4

04:54

40 - index.html

17 - CSS BackfaceVisibility Tutorial

41 - CSS BackfaceVisibility Tutorial.mp4

03:42

41 - index.html

18 - CSS Animation Tutorial

42 - CSS Animation Tutorial Part1.mp4

08:38

42 - demo.html

42 - index.html

43 - CSS Animation Tutorial Part2.mp4

08:05

43 - index.html

44 - CSS AnimationFillMode Tutorial.mp4

06:51

44 - index.html

45 - CSS AnimationPlayStateMode Tutorial.mp4

02:59

19 - SVG Projects

46 - Project 1 SVG Stroke Animation With CSS.mp4

10:19

46 - images.zip

46 - index.html

46 - style.zip

47 - Project 2 Create shape with line stroke animation.mp4

10:14

47 - index.html

47 - style.zip

48 - Project3 SVG Elastic Line Animation Effects.mp4

08:52

48 - index.html

48 - main.zip

48 - path-svg.zip

49 - Project 4 svg title wrapping animation.mp4

09:16

49 - index.html

50 - Project 5 Wavy text animation.mp4

08:48

50 - index.html

50 - style.zip

51 - Project 6 Quick SVG Loader Animation.mp4

07:48

51 - index.html

51 - style.zip

52 - Project 7 3D Hover Animation SVG.mp4

09:44

52 - index.html

52 - style.zip

53 - Project 8 svg path tracking animation.mp4

07:17

53 - index.html

54 - Project 9 SVG Loaders.mp4

08:45

54 - index.html

55 - Project 10 Scroll Drawing.mp4

09:03

55 - index.html

56 - Project 11 svg map reuniting effect.mp4

04:41

20 - Css Animation Project

57 - Project 1 CSS Animated Link Button.mp4

08:33

58 - Project 2 CSS 3D Flip on Hover Pure CSS3 3D Button Hover Effects.mp4

12:11

59 - Project 3 Editable animated text.mp4

12:14

60 - Project 4 Animated Eyes Follow Mouse Cursor.mp4

12:09

61 - Project 5 CSS 3D Wavy Circle Loader Animation Effects.mp4

13:10

62 - Project 6 CSS 3d Layered Image Hover Effects.mp4

08:40

63 - Project 7 CSS3 3D Rotation Animation Effects.mp4

11:10

21 - Project 8

64 - animated rainy cloud Part 1.mp4

07:28

65 - animated rainy cloud Part 2.mp4

09:28

22 - Project 9 CSS Loading Text Animation Effects

66 - CSS Loading Text Animation Effects.mp4

10:09

Description

learn complete CSS and Complete SVG animation from the beginning

What You'll Learn?

Complete svg from beginner to advanced
Svg Elements
svg animated logo and icon
Svg Filters
master CSS animations, transitions and transforms
CSS 3d animation
CSS Keyframe Animation Effects Tutorial
transition css , css animation , hover css , hover css animation , css hover transition effects , css image effects , css3 effects , css animation examples

Who is this for?

frontend developers

website designer

CSS Developers

UX/UI Designer

What You Need to Know?

If you have a knowledge of any vector graphics software like Illustrator, Then you would have benefited a lot but it is not required.

You should have little experience with HTML and CSS

Any text editor (Visual Studio code editor recommended)

An Internet Connection

More details

Description
Join us in an immersive journey through the world of CSS animation with SVG (Scalable Vector Graphics). In this comprehensive course, you will learn how to leverage the power of CSS and SVG to create captivating, interactive, and dynamic web experiences.
The CSS and SVG Animation Fundamentals course is designed to provide students with a comprehensive understanding of creating dynamic and visually engaging web animations using CSS (Cascading Style Sheets) and SVG (Scalable Vector Graphics). This course is suitable for both beginners and intermediate-level web developers who want to enhance their skills in creating captivating animations for websites and web applications.
Throughout the 8-week duration, students will learn the essential principles, techniques, and best practices of CSS and SVG animation. They will explore the various CSS properties and SVG elements necessary to bring static web content to life, adding interactivity and enhancing user experience. The course will also cover the latest industry trends and standards, ensuring students are equipped with up-to-date knowledge.
Key Topics Covered:
Introduction to CSS and SVG Animation: Understanding the fundamentals of animation and the role of CSS and SVG in creating dynamic web content.
CSS Animation Basics: Exploring CSS keyframes, transitions, and transforms to create simple animations.
Advanced CSS Animation: Delving deeper into advanced techniques such as animation timing functions, animation properties, and animation performance optimization.
SVG Animation Essentials: Learning SVG basics, including shapes, paths, gradients, and filters.
Advanced SVG Animation: Harnessing the power of SVG to create complex and interactive animations, including morphing, masking, and responsive animations.
Integrating CSS and SVG Animation: Combining CSS and SVG animation techniques to create seamless and visually stunning web animations.
Responsive Animations and Browser Compatibility: Understanding the importance of responsive design and ensuring animations work smoothly across different devices and browsers.

Course Benefits:
By the end of the course, students will have gained a solid foundation in CSS and SVG animation, enabling them to:
Create visually appealing and interactive web animations using CSS and SVG.
Understand the principles and techniques behind effective animation design.
Optimize animations for performance and browser compatibility.
Incorporate animation libraries and frameworks into their projects.
Enhance user experience by adding engaging animations to websites and web applications.
Prerequisites:
This course assumes a basic understanding of HTML, CSS, and JavaScript. Familiarity with web development concepts and some experience in building web pages will be beneficial but not mandatory.
Join the CSS and SVG Animation Fundamentals course and take your web development skills to the next level. Unleash your creativity and captivate your audience with stunning animations.

Who this course is for:
frontend developers
website designer
CSS Developers
UX/UI Designer

User Reviews

Rating

average 0

Total votes0

Focused display

Hi, I am Jayanta! I am a Python programmer and web developer. I have worked with companies both as an employee and self-employed. I have used Python language to develop both website and web applications.I will teach you how you can use Python, just like I do. The easiest way to learn something is to work on it. The more you exercise on this subject, the more you will learn. I take care to explain the programming concepts assuming my students do not have a computer science background. Indeed, you do not need a computer science degree to become a programmer.I graduated with a computer science technology from the University of North Bengal in India. Try out my courses, and you will be in for an exciting ride.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.