1. Web Design
  3. Animation

New Course: CSS Animation in the Real World

Scroll to top
Read Time: 2 min

CSS animation is everywhere these days. It’s cool to see a collection of CSS loading spinners, or experiment with a neat page slide effect, but how can we actually implement these techniques on our websites and apps? In CSS Animation in the Real World, you'll learn the ins and outs of CSS animation.

What You'll Learn

This course is about using CSS animations in real-world situations. Tuts+ instructor Cory Simmons will teach you practical CSS animation tricks for buttons, navigation elements, scroll events, SVG, and how to apply them to a number of situations you’ll come across every day on the web.

You'll start with an overview of CSS animation basics, and then move on to specific cases, like creating animated drop-down menus, animating SVGs, animating based on page scroll position, and more.

Here's a free preview of some of the lessons from this course:

Enhancing Button Hover States

Watch this video to really grasp how CSS animation works by creating some simple CSS animations using a few different techniques. In the process you'll make a beautiful gradient transitioned button.

Animating SVGs and Their Parts

In this lesson you’ll learn what SVGs are, when to use them, and how to animate them and their composite parts.

Animating Based on Scroll Position With WOW.js

In this video you'll find out how to animate content or media into view as the user scrolls down the page. To achieve this you'll first learn the principles, then use a nifty little JavaScript plugin called WOW.js.

You can take our new course straight away with a subscription to Envato Elements. For a single low monthly fee, you get access not only to this course, but also to our growing library of over 1,000 video courses and industry-leading eBooks on Envato Tuts+.

Plus you now get unlimited downloads from the huge Envato Elements library of 200,000+ photos and 26,000+ design assets and templates. Create with unique fonts, photos, graphics and templates, and deliver better projects faster.

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.