CSS Advanced Tutorial: Introducing the titles

introducing to css advanced concepts,
01.zip Download https://drive.google.com/open?id=1sNCRtmnaCx2PwteFkmmxSuucgWgKBNLP

Introducing the titles.
So far we've set the scene for our animated landing page with the background image we've seen how to
Add and animate pseudo elements and even delved into custom timing functions.
Let's take that further
In this lesson we'll animating the content on top and take the opportunity to experiment with more bouncy
Timing functions animation choreography and creating reusable sets of key frames to continue from the
Previous lesson.
Open the sample code zip file and look for the Folder 0 1 animated background a completed version of
This lessons code is in the folder 0 2 introduced titles
Like in the choreography you see in stage performances and dances.
We're going to think about how all the various pieces of content in our hero header move together we
Could have the elements slide into place like the background image which would show a nice connectedness
Between the elements let's also take it further by making each of the elements seem to pop out of the
Screen to begin we'll create some key frames for the animation within a key frames container we want
0 percent and 100 percent frames representing the beginning and end states of the animation
Initially the content will be invisible.
So we're setting opacity to 0 to mirror the movement of the background.
We'll also use a transform to translate the position of the content up.
Lastly we're adding a new transform we're scaling the size down to point eight in the starting frame.
This means that when the animation starts the elements will be a little smaller and by the end they
Will have animated to their normal size
We can now apply these key frames to our content
However rather than adding an animation property to each element one at a time.
Let's take this opportunity to set up a reusable class for the animation.
If we create a new class called animate pop in we can then have this apply the animation more efficiently
To get started in our HD CML.
We are this class to each of the content items we want to animate
We've added the animate pop in class to the image the headings and the paragraph text.
Now we can make use of that in our CSS.
Here's what we add to our CSS.
We begin with the class animated pup in
And the animation with the name pup in a duration of point six seconds the ease out timing function
And the animation film mode of forwards.
Here's how it looks.
It's a start but we can do better.
Currently the content elements are popping in while the page is still blank when we built our background
Animation.
We made use of the animation delay property.
This meant the background waited for four point five seconds before the animation began let's add some
Delays to our content items so that they show up after the background has started to appear before we
Start adding delays.
We set out which elements were going to style.
We have the Rocky dashed item the header title
The header subtitle and lastly the header button
These four elements will need to appear one at a time.
Thankfully we don't need to put the entire animation property for each one as these elements already Have the animate pop in class.
We will just specify a delay for each one since the background animation takes about a second to get Going.