From the course: Vanilla JavaScript: Animations

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Using additional keyframe properties

Using additional keyframe properties - JavaScript Tutorial

From the course: Vanilla JavaScript: Animations

Start my 1-month free trial

Using additional keyframe properties

“

- [Instructor] While animating a single property across keyframes may work for simple animations, what if you require multiple properties to be animated across these same keyframes? A few changes to our existing keyframes is all it will take to do so. So as mentioned right now we're just changing the background color, so we have three keyframes, each with one property being changed across those keyframes. Let's go ahead and paste in some additional properties. So here I've pasted in an opacity property. We're starting off the opacity at one and also a transform property. Here we're setting the transform rotation at zero degrees, translate3D, zero, zero, zero, so completely at both of those default settings. We're going to do the same exact thing to our final keyframe since we want this animation to loop. So again opacity at one, and there's our transform. However, I want this to transform to 360 degrees with each iteration. So we're going from zero degrees rotation to 360. Also, I…

Contents