Challenge: Adding a third animation to the chain


show more Challenge: 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 ...

Challenge: Adding a third animation to the chain

For this challenge, I'd like to see you try adding a third animation to the chained animations we've already been working on. You can start from the files you had at the end of the last tutorial, or you can find the same starting files in the Challenge folder for this chapter. Your third animation can be just about anything. You can change the opacity, maybe shift the position, anything goes as long as it's a third animation to extend the effect. A couple of tips while you work on this challenge, remember to use commas to separate the properties for multiple animations and make sure you add an animation-delay to your third animation so that it plays last in the chain of animations.

This challenge should take you around 10 minutes or so, depending on how much time you want to spend refining or adjusting your final animation. When you've got one you're happy with, check back to see the Solution file and see what I came up with.

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

Viewers:

Challenge: 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 ...