Animating SVG with CSS

Focused View

Guil Hernandez

59:28

274 View

01. Transitions and Transforms

1-transitions-and-transforms.zip

01. Course Overview.webm

01:41

02. Intro to SVG Animation.webm

02:21

03. Transitioning SVG Properties.webm

05:03

04. Fill and Stroke Transitions.webm

03:38

05. Grouping and Transforming SVG.webm

06:30

06. Rotating and Scaling SVG.webm

03:50

07. Transform Origin in Firefox.webm

03:16

animating-svg-with-css.zip

02. Keyframe and Line Drawing Animations

01. Creating an SVG Animation Sequence.webm

09:16

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

02. Finishing the Animation Sequence.webm

07:01

03. Creating an Animated Line Drawing.webm

04:56

04. Animating stroke-dasharray and stroke-dashoffset.webm

06:30

05. The Animation Challenge.webm

01:16

06. The Animation Challenge Solution.webm

04:10

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

Vector Graphics

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.