Solution: Adding a third animation to the chain


show more Solution: Adding a third animation to the chain provides you with in-depth training on Web. Taught by Val Head as part of the CSS: Animations (2013) show less
please wait ...

Solution: Adding a third animation to the chain

So here's what I came up with for this challenge. I'll just refresh the page to show you. I added a third animation that's just a little bit of a bounce to the end of our chain. So let's go to Coda and look at the HTML behind my solution. So I added a third animation named bounce, and I just created a bit of a snappy bounce effect translating on the Y axis. To create this bounce effect, I just created a few keyframes translating along the Y axis to get an up and down bounce. I started out with the 0% keyframe with no translation at all so we could start kind of from a blank slate.

At 70%, I translated up just a little bit. And then at 80%, I made a big jump so that 10% jump is pretty big, and it moves pretty fast. Then at my 100% keyframe, I put everything back to a translation of zero. If we scroll up to where I added my properties, on our mol class I added the animation-name of bounce to our comma separated values for all the animation names. In animation-duration, I had it last 0....

Solution: Adding a third animation to the chain
Video duration: 1m 44s 1h 56m Intermediate

Viewers:

Solution: Adding a third animation to the chain provides you with in-depth training on Web. Taught by Val Head as part of the CSS: Animations (2013)

Subject:
Web
Software:
CSS
Author:
please wait ...