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
Jochem2y 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
Pat66
Pat662y 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
Jochem2y 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;
}
Jochem
Jochem2y ago
did you mean to link something else?
Pat66
Pat662y ago
the good link the first an second words appear after the others
Jochem
Jochem2y ago
I'm not sure what you mean. They do, do you want them to appear at the same time as the others?
Pat66
Pat662y ago
yes they should slideup at the same time
Jochem
Jochem2y 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
Want results from more Discord servers?
Add your server