Animating SVG with CSS

Focused View

Guil Hernandez

1:55:59

111 View

1-transitions-and-transforms.zip

2-keyframe-animations-and-line-drawings.zip

Lesson 1. Course Overview.mp4

01:41

Lesson 2. Intro to SVG Animation.mp4

02:22

Lesson 3. Transitioning SVG Properties.mp4

05:03

Lesson 4. Fill and Stroke Transitions.mp4

03:38

Lesson 5. Grouping and Transforming SVG.mp4

06:30

Lesson 6. Rotating and Scaling SVG.mp4

03:50

Lesson 7. Transform Origin in Firefox.mp4

03:16

Lesson 8. Creating an SVG Animation Sequence.mp4

09:28

Lesson 9. Finishing the Animation Sequence.mp4

07:01

Lesson 10. Creating an Animated Line Drawing.mp4

04:56

Lesson 11. Animating stroke-dasharray and stroke-dashoffset.mp4

06:30

Lesson 12. The Animation Challenge.mp4

01:16

Lesson 13. The Animation Challenge Solution.mp4

04:10

Lesson 15. Vue.js Advanced Features from the Ground Up 15.mp4

56:18

Description

About this Course

SVG (Scalable Vector Graphics) also supports interactivity and animation, so you can animate and interact with SVG like you're able to do with HTML. This short course covers the most common methods for animating SVG: CSS transitions, transforms, and keyframe animations.

What you'll learn

Transitioning & Transforming SVG
Animating SVG with keyframes
Animated Line Drawings in SVG

More details

User Reviews

Rating

average 0

Total votes0

Focused display

CSS

Guil Hernandez

Instructor's Courses

Guil is a Full Stack JavaScript and Front End Web Development instructor at Treehouse. You can follow him on Twitter @guilh.

Treehouse

View courses Treehouse

Treehouse or is an online technology school that offers beginner to advanced courses in web design, web development, mobile development and game development. Its courses are aimed at beginners looking to learn computer coding skills for a career in the tech industry.