Make Your Website Shine with an Animated Tagline – Using an SVG and CSS Animations | Amanda Olson | Skillshare

Make Your Website Shine with an Animated Tagline – Using an SVG and CSS Animations

Amanda Olson, Designer and Front-End Developer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
11 Lessons (24m)
    • 1. Introduction

      1:17
    • 2. Creating Your SVG

      2:24
    • 3. Prepping Your SVG for Animation

      1:50
    • 4. Exporting Your SVG File

      1:09
    • 5. Accessibility & SEO Considerations

      1:14
    • 6. Adding Your SVG Code to Your Site

      0:54
    • 7. Basic Styles for Your SVG

      1:58
    • 8. CSS Animation Basics

      4:21
    • 9. Setting Up Your CSS

      2:20
    • 10. Writing Your CSS Animations

      6:04
    • 11. Conclusion

      0:30

About This Class

Create an animated tagline or headline for your website, using an SVG and CSS animations. Easily customize for your own website by switching out the icon and tagline text. 

In this 25-minute class, we’ll cover building your SVG, prepping it for animating, adding your SVG file to your site, some CSS animation basics, and building your CSS animations file.

At the end, you’ll have an animation that will set your site apart from the rest.

This class is geared toward website DIYers or designers and developers who provide website services to others and want to provide that next-level service to their clients.

Prior to this class, you’ll need to have experience with Adobe Illustrator, HTML, and CSS.