CSS Animations and Transitions

Animating States Exercise

CSS Animations and Transitions

Check out a free preview of the full CSS Animations and Transitions course

The "Animating States Exercise" Lesson is part of the full, CSS Animations and Transitions course featured in this preview video. Here's what you'd learn in this lesson:

Students are instructed to apply animations to the form's subscribe, subscribing, success, and error states.


Transcript from the "Animating States Exercise" Lesson

>> All right now we are going to remove this and we are going to go to the next exercise. And so you're going to see a few things over here. And so what we want to do is, we want to use data attributes to conditionally have this go between different states.

So, let me just show you the end result. And if you do wanna see the end results at any time, you could also go to indec.final.html. So what we want to happen is, of course when you type in an email then you click Subscribe it's gonna go to subscribing.

And then it's going to go to the interstate and then it's gonna shake a little bit. So you want to define that shaking animation only for the error state. And again, you're going to use data attributes in order to do that. So we click again. And it goes to success.

And it's actually going to do that randomly, so it might keep going back to error. In this case, we got lucky and went to success. So, yeah, remember we're adding these animations to each of the specific states. And yeah, have fun.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now