CSS Animations and Transitions

CSS Keyframes Exercise

CSS Animations and Transitions

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

The "CSS Keyframes 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 use CSS keyframe animations to animate form elements.


Transcript from the "CSS Keyframes Exercise" Lesson

>> Let's move on to our exercise now. So we're going to be working in keyframe animations, and that's at 0 to dash keyframes. What we want to do is add animations for this entering in, so we want the form to sort of slide up or whatever you want to do.

But I think that that's a good intro to just getting a feel for in meeting something. And we might also want to add animation for each of the elements as well when they enter in. So this would just be an animation that you add directly to the elements.

And when you load the page, those animations are going to be immediately applied. And so the final thing I want you to do is to use transform to make a shaking animation. And we're going to be using that in a later exercise. But shaking is just you're transforming from a native translate X to a positive translate X, back and forth.

So you could use some of the shorthand techniques that we learned in order to create those key frames. So 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