Featured resource
2025 Tech Upskilling Playbook
Tech Upskilling Playbook

Build future-ready tech teams and hit key business milestones with seven proven plays from industry leaders.

Check it out
  • Course
    • Libraries: If you want this course, consider one of these libraries.
    • Core Tech

Making a Responsive and Interactive Animation with SVGs in CSS

In this tutorial, we'll learn how to build fun animations for the browser that are responsive as well as interactive. Software required: Adobe Illustrator CS6, Chrome, Sass 3.3, jQuery 1.x, Modernizr 2.x.

What you'll learn

In this tutorial, we'll learn how to build fun animations for the browser that are responsive as well as interactive. We'll go over how to turn a vector-based design into web-optimized SVGs and make writing keyframe animations easier and more interesting using Sass. By the end you'll have greater understanding of how CSS animations can work together to form an interesting whole. These skills and insights should, in turn, go a long way to make more dynamic web projects that can tell a story or catch the user's attention. Software required: Adobe Illustrator CS6, Chrome, Sass 3.3, jQuery 1.x, Modernizr 2.x.

Table of contents

Get access now

Sign up to get immediate access to this course plus thousands more you can watch anytime, anywhere.

Get started with Pluralsight