Kevin Powell - Community•2y ago

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.

9 Replies

Jochem•2y ago

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

@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•2y ago

now I have another problem how to manage time the world should slideup at the same time with the last world and slideright after

Jochem•2y ago

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, you could set the animation-delay for un and trois to the same value. If you then set the animation-duration for un to twice that of 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•2y ago

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

Patrick L

CodePen

xxQKXqQ

...

Jochem•2y ago

did you mean to link something else?

Pat66OP•2y ago

the good link the first an second words appear after the others

Jochem•2y ago

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

Pat66OP•2y ago

yes they should slideup at the same time

Jochem•2y ago

and you still want the sliding sideways animation to be slower than the up one? 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 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

Gaming

Programming

ANIMATION TEXT APPEAR