How do you add multiple transformations to a single element via javascript?

Question

I want the pancake to move 20vh up and then 20vh down but I can only get one transformation to work. How do I add more?

window.onload = function()
{

document.getElementById("pancake").addEventListener("click", flip);

function flip()
{
document.getElementById("pancake").style.transform = "translate(0px, -20vh) translate(0px, 20vh)";

document.getElementById("pancake").style.transition = "transform 2s";

}

}

Answer 1

you need to define animation property linked to a @keyframes rule:

https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes

https://developer.mozilla.org/en-US/docs/Web/CSS/animation

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations

Answer 2

visph shorter than that...

@keyframes anim {
from,50%,to {
transform:translate(0,0);
}
25% {
transform:translate(0,-20vh);
}
75% {
transform:translate(0,20vh);
}
}
https://code.sololearn.com/WRgSW35g3Aa8/?ref=app

as for what Mirielle[ INACTIVE ] suggested, with sin...
https://code.sololearn.com/WZg12VAUH01a/?ref=app

Answer 3

Mirielle[ INACTIVE ]
not as long as you seems think:

@keyframes anim {
from {
transform:translate(0,0);
}
25% {
transform:translate(0,-20vh);
}
50% {
transform:translate(0,0);
}
75% {
transform:translate(0,20vh);
}
to {
transform:translate(0,0);
}
}

and then set 'animation-iteration-count' to 'infinite' to get infinite up/down mouvement...

Answer 4

Mirielle[ INACTIVE ] visph thank you guys for the explanation! i’m going to practice it in my next code 👍👍

Answer 5

i got it to work^^ https://code.sololearn.com/Wa13a14A5A24/?ref=app

Answer 6

Mirielle[ INACTIVE ] what's the relation between OP question and sin(x), as OP ask just for transform?

I agree with you that you could do smoother animation using it, but actually, OP question is about chaining animations by just setting css once... not handling full animation frames by js ^^ however, by using the animation/transition-time-function you could set such close behavior...

one thing at a time, didn't you think? ;)

by the way,