From the course: CSS: Scrolling and Parallax

Unlock this course with a free trial

Join today to access over 22,600 courses taught by industry experts.

Magic keyframes

Magic keyframes - CSS Tutorial

From the course: CSS: Scrolling and Parallax

Start my 1-month free trial Buy for my team

Magic keyframes

“

- [Instructor] So I'm going to show you a really cool animation trick that you can use over and over. You may have noticed when we worked in the last video that oftentimes the transformations that we're doing like this translation are really resetting things back to the way that they used to be. So in this case, we don't actually need this transform because all we're doing is resetting this element back to its original state. So if this monsters right here had a position that would normally be here, then when we're just resetting things back, it's going to end up there anyways. So we can use that shortcut to create a special magic key frame. And we're going to call this, Clear, and here, all we need to do is to create a two key word. So we're just making the end of the transformation and we're going to reset the opacity to one and then reset all of the transforms to nothing. So by using this non-keyword, we're…

Contents