ANIMATION TEXT APPEAR

Hi everyone

I realise this animation
https://codepen.io/alpha_66/pen/xxQKXqQ

the problem is on the second word in yellow background
the world suppose to come from down after slide from left to right
but my word don't come from down he' s appear and slide to right.
can I get some idea to fix it ?

Thanks by advance.

Jochem•6/5/23, 9:43 AM

so you want the word to move up, and then slide right?

Jochem•6/5/23, 9:45 AM

@keyframes slideRight {
  0% {
    transform: translateY(100px);
  }
  50% {
    transform: translateY(0px);
  }
  100% {
    transform: translateX(280px);
  }
}

@keyframes slideRight {
  0% {
    transform: translateY(100px);
  }
  50% {
    transform: translateY(0px);
  }
  100% {
    transform: translateX(280px);
  }
}

This slides up into view from below, then slides right into place

Pat66OP•6/5/23, 10:43 AM

Pat66OP•6/5/23, 10:46 AM

now I have another problem

Pat66OP•6/5/23, 10:47 AM

how to manage time the world should slideup at the same time with the last world and slideright after

Jochem•6/5/23, 10:52 AM

best way I know is to just tweak the values until it looks right. You can do the math though
Let's say you want to match

trois

trois

, you could set the animation-delay for

un

un

and

trois

trois

to the same value. If you then set the animation-duration for

un

un

to twice that of

trois

trois

, they should match.
This should work:

.un p{
  animation: slideRight 2s forwards;
  animation-delay: 1.2s;
}

.un p{
  animation: slideRight 2s forwards;
  animation-delay: 1.2s;
}

Pat66OP•6/5/23, 10:54 AM

https://codepen.io/alpha_66/pen/xxQKXqQ

CodePenPatrick L

xxQKXqQ

...

PPat66 https://codepen.io/alpha_66/pen/xxQKXqQ

Jochem•6/5/23, 10:55 AM

did you mean to link something else?

JJochem did you mean to link something else?

Pat66OP•6/5/23, 11:11 AM

the good link

Pat66OP•6/5/23, 11:13 AM

the first an second words appear after the others

Jochem•6/5/23, 11:16 AM

I'm not sure what you mean. They do, do you want them to appear at the same time as the others?

Pat66OP•6/5/23, 11:57 AM

yes they should slideup at the same time

Jochem•6/5/23, 11:59 AM

and you still want the sliding sideways animation to be slower than the up one?

Jochem•6/5/23, 12:00 PM

you'll have to adjust the percentage for the step that's now 50%. Right now it'll take half the animation-time (8s in the

animation

animation

rule) to slide up, then half the time to slide right/left. If you change that to 25%, it'll take 25% of the available time to go up, then 75% of the time to go right/left