From the course: CSS: Animation

Unlock the full course today

Join today to access over 24,400 courses taught by industry experts.

Solution: Adding keyframes to an animation

Solution: Adding keyframes to an animation - CSS Tutorial

From the course: CSS: Animation

Start my 1-month free trial Buy for my team

Solution: Adding keyframes to an animation

“

- [Instructor] Here's my solution to the adding key frames challenge. I replaced our scale in effect with a bit of a wiggle effect. Here's what I did in the CSS. I created a new set of key frames and called it wiggle since I was making a bit of a wiggle effect. And in the key frames, I adjusted both the translation on the X axis and the rotation to give it just a little bit of a movement and a bit of a rotation back and forth. Another thing I changed was the transform origin over h2. And that makes the rotation look just a bit different because we're rotating from a slightly different point. Then I applied the animation of wiggle. I gave it a quite short duration since wiggles generally happen kind of quickly. Had it repeat infinitely and used this cubic-bezier for the easing. There's no right or wrong answer for this challenge. So whatever you did to adjust the key frames and create a slightly different effect, you're on the…

Contents