Ok, here is a challenge. Go ahead and take a look at this animation. This would overload most people's senses but hopefully it will give you plenty of practice with CSS Animations.

Your goal is to replicate the timing and visuals of what you see. This gif is on a 7 second loop. We don't want to recreate the page reload :)  I'll break down the functionality we want.

Upon page load (0 seconds) you should see:

• The title dropdown in one second and remain stationary.

• An blue dot should animate between blue to clear then back to blue infinitely.

• A stationary paragraph text.

At the 5 second mark you should see:

• The paragraph text slide out of the screen to the right and remain off screen.

Remember, at 7 seconds this gif repeats itself. You are not trying to replicate that :) 

Alright, that is it! Go for it. Below I'll add some tips below for the animation sub-properties you may want to use.

There are a lot of ways to skin a cat so you can probably accomplish this in alternative ways to I suggest. If you do, that's great!

Go for it! Please spend at least 15 minutes trying to solve this on your own. Even if you make almost no progress and can't get anything to work as you expected the amount you will learn when I walk through the code will be significantly greater if you have first tried to do this yourself.

Ok, if you have given it a shot and still need some help, here are some pointers.

1. For the title dropdown you can use an approach almost identical to our hovering broomstick.  We want to run our animation on the transform CSS property and translate our title down the Y axis with translateY. At 0% we want our title text to be off the screen and by the time we reach 100% we want it to be stationary on the screen. All of this should take place within 1s.

2. For the animating circle there are a number of different approaches you can take. For the animation sub-properties I used: animation-name, animation-duration, animation-iteration-count, animation-direction and animation-timing-function.

3. For the paragraph that slides off the screen at the five second mark you will take a similar approach to the title in step 1. We will want to run our animation on the transform CSS property. This time we will move our item along the X axis rather than the Y axis with the translateX() CSS function. The animation sub-properties I used are: animation-name, animation-duration, animation-iteration-count, animation-delay and animation-fill-mode.  Feel free to refresh your mind on how animation sub properties work here.

Alright, if you are still stuck you can look at the code below and compare it to yours. Or, you can watch me code out a possible solution in the following video :)

Now, that you have seen these hints, please spend another 15 minutes trying to come up with a solution before you look at what I come up with.

Did you make something more awesome? Post the codepen in the Q&A section.