From the course: Mastering Web Developer Interview Code

Unlock this course with a free trial

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

How do you animate CSS?

How do you animate CSS?

From the course: Mastering Web Developer Interview Code

Start my 1-month free trial Buy for my team

How do you animate CSS?

“

- [Instructor] Animation can be one of those tricky questions during an interview, because a lot of designers and front-end of developers sort of put this off, and it can be a little bit tricky even though it starts out pretty easily. So it involves creating a key frame based sequence of changes and then applying it to a CSS rule. So let's take a look at how that works. Now, unlike more CSS rules, animation takes place in two parts. First, is the definition of the structure of the animation. To do that, we use the @keyframes at-rule. Now this is similar to and related to media queries. So whenever you have a definition that starts with this keyword at sign right here, that is called an at-rule. And in this case, we're using this keyword keyframes. So the way that we define a sequence first is by creating this at keyword right here with keyframes and then giving the animation a name, this can be whatever you want here.…

Contents