How can I animate going up

HTML & CSS
1

Hi, can I ask some help please, how can I achieve to animate the letters going up ?

During the page load, the letters are invisible first in the div class=“balloon-area”, then after 1 second it will animate to going up. The formation of the letters is diagonal to show up when it animates by 3 letters. Then it will disappear after it reaches to the top end. Then it will shop up again after all the letters are being animate. It’s like infinite loop ?

Here is my codepen.

Thank you in advance.

2

You can use keyframes and translate the letter from one position to another.

I’m not going to write the whole thing (as I am away) but the basics are like this.

Of course you will need more complex keyframes if you want a lot of stops and a lot of other letters but the above should show how you can animate from one position to another.:slight_smile:

1 Like
3

Hi @PaulOB ,

Thank you so much, I will try this I’ll be back :slight_smile:

1 Like
4

Hi PaulOB,

Can I ask how can I make this not to pause in center during start of animation ?.

I’m tweaking the class .balloon, but it’s look like going up so fast. And still it pause to the center.

 animation: float 10s infinite 1s;

To

 animation: float 3s infinite 1s;

Just like a balloon like this example that animates go up, but the example is very fast

Thank you in advance.

5

You could set the opacity to zero by default and then you will only see it once the key frames kick in.

If you don’t want the pause in the middle of the actual animation then remove some of the intermediary steps in the key frame.

I assumed you wanted to stop half way but if not then don’t make it do nothing in the middle of the key frame.

6

Thanks I’ll be back :slight_smile:

1 Like
7

Hi PaulOB,

I think I got it not to pause in center. :smiley:

Thank you

8

Hi @PaulOB,

How can I set a little delay ? First 3 will go up during page load then a little delay for the second 3 to start the animation and so on. Is this possible ?

9

The easiest solution is to have 2 sets of elements and one you animate once and disappear and the second set you just animate after setting a small animation-delay value.

Alternatively you could add a new class when the document is loaded (via js) and then use that new class to do the continuous animation. i.e. The default is to animate just once but when you add the new class you can have a new animation that is continuous.

10

Hi PaulOB,

I could not get the idea :pensive:

11

Something very roughly like this.

New class added to the body after 10 seconds.

<script>
  setTimeout(function(){
     document.querySelector('body').classList.add('animation2');
}, 10000);
</script>

Then a new keyframe.

/* second animation */

.animation2 .balloon {
  animation: float2 3s infinite;
}
@keyframes float2 {
  0% {
    transform: translate3d(0, 600px, 0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translate3d(0, -600px, 0);
    opacity: 0;
  }
}
1 Like
12

Thank you so much @PaulOB :slight_smile:

I also got it. This what I want 3 letters going up first then delay next 3 letters. But I need to adjust my animation a little bit slow to go up, just like a balloon floating up on air.

I will try also to apply your code, this can help me because it might also have 12 letters or more but still the same by 3 letters going up.

:slight_smile:

13

Just make the animation duration longer. You have it at 10s so increase that time and the animation will be slower.

If that’s what you meant :slight_smile:

1 Like
16

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.