There are two sets of animation, one for the header content background (headerSlide) and one for the header content itself (contentSlide). 

Each element has its own animation settings to create the staggered slide in effect.

If you would like to modify these animations, here is what you may want to change:

animation: headerSlide 2s ease-in-out 1s 1 forwards;

animation: contentSlide 1.5s ease-in-out 1.2s 1 forwards;

headerSlide/contentSlide = Animation name: the name of the animation, you don't need to change this.

2s/1.5s = Animation duration: the time in seconds the animation takes from start to finish.

ease-in-out = Animation timing function: Makes the animation slow at the start, fast in the middle and slow at the end.

1s/1.2s = Animation delay: The time in seconds before the animation begins.

1 = Animation iteration count: The number of times the animation should run.

forwards: Animation fill mode: The animation will stay in its final position when it stops and not go back to the start.

Have fun!