Animating SVG with CSS Course

Go to class

Write Review

Free Online Course: Animating SVG with CSS Course provided by Treehouse is a comprehensive online course, which lasts for 1-2 hours worth of material. The course is taught in English and is free of charge. Animating SVG with CSS Course is taught by Guil Hernandez.

via Treehouse

1-2 hours worth of material

Self Paced

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

Syllabus

Transitions and Transforms

Learn how to animate SVG icons, using CSS transitions and transforms.
Chevron 9 steps
- Course Overview
  
  1:41
- Intro to SVG Animation
  
  2:21
- Transitioning SVG Properties
  
  5:03
- Fill and Stroke Transitions
  
  3:38
- Grouping and Transforming SVG
  
  6:30
- Rotating and Scaling SVG
  
  3:50
- Transitions and Transforms Review
  
  7 questions
- Transform Origin in Firefox
  
  3:16
- Transitions and Transforms
  
  6 objectives
Keyframe and Line Drawing Animations

Learn how to create an SVG animation sequence, using CSS @keyframes rules and animation properties. You will also learn the concept behind SVG line animation.
Chevron 7 steps
- Creating an SVG Animation Sequence
  
  9:16
- Finishing the Animation Sequence
  
  7:01
- Creating an Animated Line Drawing
  
  4:56
- Animating stroke-dasharray and stroke-dashoffset
  
  6:30
- The Animation Challenge
  
  1:16
- The Animation Challenge Solution
  
  4:10
- Keyframe and Line Drawing Animations Review
  
  6 questions

0, based on 0 Course votes at GetYourEducation

Start your review of Animating SVG with CSS Course

Add review ->

Language

English
Date of Start
18th June, 2021
Level
Intermediate
Price
Free Trial Available
Provider
Treehouse
Taught By

Guil Hernandez
Share this course

Animating SVG with CSS Course

What you'll learn

Transitions and Transforms

Course Overview

Intro to SVG Animation

Transitioning SVG Properties

Fill and Stroke Transitions

Grouping and Transforming SVG

Rotating and Scaling SVG

Transitions and Transforms Review

Transform Origin in Firefox

Transitions and Transforms

Keyframe and Line Drawing Animations

Creating an SVG Animation Sequence

Finishing the Animation Sequence

Creating an Animated Line Drawing

Animating stroke-dasharray and stroke-dashoffset

The Animation Challenge

The Animation Challenge Solution

Keyframe and Line Drawing Animations Review

Accounting for Mergers and Acquisitions: Foundations

Advanced Topics in Derivative Pricing

Assisting Public Sector Decision Makers With Policy Analysis

Creating and Capturing Mixed Reality

Docker. Basics

Natural Language Processing and Capstone Assignment