All right, finally, we arrived at our main attractions, the bubble animation, so let's go to our
website and let's also go to text editor now for a bubble animation.
And first of all, to have the photo and create a date with the class actually idea of bubbles.
Now, within here, going to create an image tag and I'm going to choose our bubble form image container
and now I'm going to come up with this, I think it was one, two, three, four, five, six, seven
times.
So let's go.
One, two, three, four, five, six, seven.
OK, that's it now I need to go to the success.
Now, let's, first of all, start our bubbles so as to hear Bubbles animation.
Let's grab on to the idea of bubbles.
And we need to size them so as the width of 85 pixels.
Height of one hundred pixels and the opacity of point three, and now we need to create a keyframe.
Now, this keyframe, well, at Keyframe was called bubble.
And it's going to go at going to start at zero percent with a transform.
Of translate on the y axis of zero, and it will also have a capacity of zero, so they will pretty
much be invisible at zero percent, then at 30 percent.
They're having a paucity of one and they'll keep going with this percentage.
Till they reach.
One hundred percent, so this will be 50 and this will be 70.
And the last one.
We'll be 100 percent.
One hundred, but at one hundred percent, I will also do another translation and a translator on the
Y axis of minus 80 minus.
At Newport Heights.
So how will this look?
Well, our bubbles are, first of all, not here where bubbles are still need a bit of a little bit
of standing.
Now, first of all, let's include this animation.
So animation.
And bubbles or bubble.
Now let's go underneath all this and grab onto the bubble again, and this would be actually the image
they want to start to continue.
This is each bubble itself.
So after the first tightening here, the within the only the images which are within our bubble it and
I'm going to style the bubble, it itself bubbles keyframe.
You will go down here and now will style our bubble container and this lovely width of one hundred percent.
There's going to be this pleaders Fleck's.
And we're going to align items to the center not only by doing this.
We will have here our bubbles.
OK, now let's paste them up so they're kind of smooshed together slow.
I want them to be spaced up, spaced with.
No space between, so let's go in here and justify the content with space between.
Now the bubbles are positioned up in the top container, but I want them to be at the bottom, so we
need positioned and absolute and to the bottom.
With the value of zero now all but also down here.
But you know what, I don't want the bubbles to interfere with our container or image container right
here, so let's change this with.
Around, OK, because this still gives a bit of space to left and right of the items.
Now, are you ready to start animation?
I believe so for this, we're just going to go in here and see the animation, take seven seconds.
They should be linear and it should be infinite at the initial in the net, let's say.
And let's take a look at our bubbles.
Now, that's pretty awesome.
But they are bubbling up in a row and they do have the same dimensions.
So how can we fix this?
Well, it's pretty simple.
We just need to take care of each of them individually and we're going to achieve this by targeting.
The idea of bubbles.
Within them, the image tag, and now I'm going to select the first image tag by using our and child
and one now the first child, we going to have an animation delay of two seconds.
And we're also going to changes it to 20 pixels and its height to 25 pixels.
So let's take a look at our first child.
He used small wonder, does the first child and you can see it has delay, so it's no longer in line
with our bubbles.
OK, so we're going to mess around with this a bit.
One, two, three, four, five, six, seven, eight.
One, two, three, four, five, six.
And with the other one up, there should be seven.
So I'm the second child.
To a delay of one second.
And let's increase this to 40 and 40.
Five.
The first child, you, my child, will have a delay of three seconds and.
Wanted to be large.
Then the fourth child.
You should have a delay of six seconds and you should be.
Forty and 35.
Then, hey, fifth child.
Wait a second.
The fourth child, you should be 30 and 35, 40, why do I keep jumping down there?
So for the 45 and the fifth child, the fifth child should have a delay of eight seconds and the domination
of 50 and 55.
Then the six child.
Should have a delay of less than two seconds and.
40 and 45 again, and the seven child should have a delay of.
Five seconds, and it should be 50 and 55.
OK, so let's see how this looks.
Hey.
It's bubbling, OK, guys, so I hope you enjoy this project object, so you enjoy this project.
I think it's an awesome one.
Just to get a bit of grip on the animations positioning.
Yeah, it's it's pretty cool, isn't it.
So soon.
The next one.
Take it.
Bye by.