From the course: CSS: Animation

Unlock the full course today

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

Solution: Adding a third animation to the chain

Solution: Adding a third animation to the chain - CSS Tutorial

From the course: CSS: Animation

Start my 1-month free trial Buy for my team

Solution: Adding a third animation to the chain

“

(bright music) - [Instructor] Here's my solution to this challenge. After the letters go up and down, I added a little kick on the R for a third animation in the chain. I thought that would give it a little bit of, I don't know, fun. And here's what I did to add that third animation to the chain. First, I added one new set of keyframes in our CSS. I called it flick 'cause that's kind of what the R is doing, and I used a couple of tricks in this keyframe block. First, since I knew I wanted the R to start and end in the same place, I comma separated the zero and 100% keyframes to assign their styles at the same time. You can use this anytime you're reusing properties in two sets of keyframes. The other thing I did was I chose to set the animation timing function in the keyframe definitions themselves so that I could use a different easing on the way out and the way in essentially of that flick movement, and this…

Contents