HTML5 Animations Made Easy with Animate.css

Take your web development skills to the next level with animation! Animate.css makes it easy to animate any HTML object with two simple classes. Learn to control when an animation starts, what happens when an animation completes, and much more.
Course info
Level
Beginner
Updated
Jun 6, 2018
Duration
2h 16m
Table of contents
Description
Course info
Level
Beginner
Updated
Jun 6, 2018
Duration
2h 16m
Description

At the core of front-end development is a thorough knowledge of CSS animations. In this course, HTML5 Animations Made Easy with Animate.css, you’ll learn how to easily apply basic Animate.css animations and even customize your own animations. First, you’ll learn how to apply simple Animate.css animations. Next, you’ll explore how to adjust settings of Animate.css like duration, delay, and iteration count. Then, you'll see how to control when an animation happens using simple jQuery events and how to make something else happen when an animation completes. Finally, you’ll discover how to create your own custom Animate.css animation and make it part of Animate.css When you’re finished with this course, you’ll have a foundational knowledge of Animate.css and basic CSS animations that will help you as you move forward to bringing life to your websites and taking your web development skills to the next level.

About the author
About the author

Jeff has 10+ years experience in the digital learning and media industry. Currently he is Founder and Head Trainer/Sensei at Learning Dojo, a company dedicated to training you to become a software ninja in a variety of eLearning, web, and mobile related software applications.

More from the author
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hello, and welcome to this Pluralsight course on how to create HTML5 animations easily using Animate. css. My name is Jeff Batt, and I'm excited to be able to spend some time with you exploring Animate. css. Animate. css is an easy-to-use framework that makes animation simple. You will be able to bring to life your website and take your development skills to the next level. We will explore how to get started with basic animation. Then we will cover to how to change basic animation settings like durations, delays, and iterations. We will then dive deeper into how to control animations using basic jQuery commands. We will even learn how to fire code after an animation completes. And then finally, we'll wrap up how to build our own custom animations that can be integrated right into Animate. css. Animate. css is a simple, yet powerful framework. It's great for beginners just starting out with animations and flexible enough to give more control for more advanced developers. To get started with this course, you'll need to know a little bit of the basics of HTML, as well as some basic CSS. As long as you know basic HTML and CSS, you'll be able to work with the code files and be able to edit some of the code that we're going to be working with inside of this course. We will cover everything you need to know to become an Animate. css ninja and bring to life your HTML website. All right, so enough talking. Let's go ahead and get started.

Getting Started with Animate.CSS
Hey everyone. My name is Jeff Batt with Learning Dojo, and welcome to this Pluralsight course, HTML5 Animations Made Easy with Animate. css. Animate. css is a framework that allows you to go in and easily animate objects inside of any web page. We're going to talk about how to get started with it. We're going to talk about how to go in and download it, attach it to any project. But not only that, we're going to dive into some more advanced topics, like how to trigger animations when other animations complete, how to loop animations, how to go in and customize some of the animations as well, like the delay and the duration. We're also going to talk about how to go in and create your own Animate. css animations and customize and extend it beyond what the default's capabilities are. So we have a lot to cover, and we're going dive right in and start talking about what Animate. css is. So what is Animate. css? Animate. css is a cross-browser library of CSS animations, as easy as an easy thing. Now that's the description from Animate. css's website. It really is that easy to get started, to start animating some objects. We're going to go beyond just the default easiness of it. We're going to dive into some more advanced topics. So this course is going to be awesome. We're going to talk about all the different things you can go in and do with Animate. css. So let's go ahead and dive right in.

Animation Basics
In the last section, we covered a little bit about what Animate. css is, and we talked a little bit about what frameworks are. We talked a little bit about the sample projects that we'll be working with as well. So in this section, we're going to go ahead and start talking about animation basics. We're going to talk about how to download Animate. css, how to attach it to a project. We're also going to talk about the different types of animations that are out there that you can use as well and how you can explore the animations inside of here. So we have a lot to cover. Let's dive in and start working with Animate. css.

Changing the Animation Settings
In the last section, we covered all of the basic Animate. css features, being able to animate an object, being able to switch out the different objects, being able to loop the objects as well. And so now, we're going to go in and we're going to explore, in this section, more settings that you can do right inside of Animate. css. This section does require you to use some CSS. So far, we've just been working with HTML, but now we need to go into our CSS, and we need to apply some settings to our CSS in order to change the duration, in order to change the timing, in order to change some loops. If we want it to loop for just a certain number of times, we need to be able to do that in our CSS file. And we're going to do that in this section.

Controlling Animations with jQuery
So up to this point we've learned about what Animate. css is, how to attach Animate. css to any project. We've also learned about how to start animating objects, how to loop animations as well. We've also learned about how to adjust some of those basic settings in Animate. css, like delay and duration and iteration counts as well. But there's still more that you can do with Animate. css. And this requires going beyond Animate. css and working a little bit with JavaScript. Now JavaScript, you can do all of what we're going to do inside of just plain, vanilla JavaScript, but jQuery makes it a little bit easier, allows us to select objects easier, it has a couple different classes, like being able to remove a class or add a class easily as well. So we're going to cover jQuery. We don't need to know jQuery and all the different things about jQuery for this section. We're going to cover what you need to know without having to know everything else about jQuery. So we're going to dive in and start working with jQuery to control some of our animations.

Triggering Code After an Animation Ends
So one problem that we ran into with the toggleClass is it had to remove after the animation ended. We had to click one more time to remove the class, and then click again in order to animate it again. It'd be nice if the removeClass actually happened as soon as the animation ended. So that's where this section comes into play, being able to trigger code after an animation ends. Now there's a few things that you have to do to set it up before you can trigger that code. And there's some code you have to get from the Animate. css documentation before you can do that. So we're going to go get that code and apply it to our project before we can trigger some code to run after an animation completes.

Custom Built Animations
We've covered a lot, and now we're going to actually go in and cover how to build some custom animations. So Animate. css basically just uses regular CSS animations. So if you're familiar with CSS animations, you can go in there, you can adjust some of the existing animations, or you can go in and basically create your own custom animations. And we're going to talk about that in case you wanted to extend it and go beyond what's there available by default.

Conclusion
So we've made it, pat yourself on the back. We've gone through, we've learned about the basics of Animate. css. We could've stopped there, but we went in and we learned how to add on our own triggers. We learned how to add classes, remove classes, how to trigger code when an animation completes. We also learned how to create our own custom animations as well. So we have learned a lot. So I highly recommend you go back in and you review these sections as much as possible. But we're going to wrap up in this section, and then talk about a few references and different help files that you can go in and take a look at to learn a little bit more. So let's go ahead and just wrap up everything in this course.