From the course: Creating Web Media

Unlock this course with a free trial

Join today to access over 22,600 courses taught by industry experts.

Animate SVG with CSS

Animate SVG with CSS - CSS Tutorial

From the course: Creating Web Media

Start my 1-month free trial Buy for my team

Animate SVG with CSS

“

- [Chris] Hi, this is Chris Converse and in this episode we'll animate elements of an SVG file using CSS. And we'll be adding our CSS directly into the SVG file, allowing the graphic to animate without requiring any outside CSS or JavaScript. So if you'd like to follow along download the Exercise Files and we'll begin by opening the HTML file in the text editor. And now once you have the HTML file open you'll notice in the head area we have a link to a stylesheet and in the body area we have all of our content. However the animation is going to happen inside of the wind_turbine.svg file itself. We're not going to require any additional CSS or JavaScript outside of this SVG file. So to work on this let's go back to the Exercise Files, let's go into the images directory, and let's open wind_turbine.svg in our text editor. And now once you have the SVG file opened you'll notice at the top we have a definitions element here. Let's scroll down. Before the ending definition we have a style…

Contents