Animate tag, html

Question

How can I do, only in html, 2 animations for one rect?
Like, that a rect will move from 0,0 to 300, 100 and then move from 300,100 to 600,0?

If you have to use css for this case(hey, it’s a rhyme!), tell me

I checked the questions of the other sololearners, don’t be angry

Answer 1

HTML alone does nit perform animation. you need CSS animation and @keyframes to insert animation into HTML element.

You didn't specific movementun x or y axis, I presume you want x axis.

Here the code.

div {
width: 300px;
height: 100px;
background-color: gray;
margin: 0 auto;
animation: ani 10s linear 0s 1 forwards;
}

@keyframes ani {
from {
transform: translateY(0);
background-color: gray;
}
59% {
background-color: gray;
}
60% {
transform: translateY(300px);
background-color: red;
}
to {
transform: translateY(500px);
background-color: red;
}
}

https://code.sololearn.com/WQwn4ki93yWB/?ref=app

As long as you dont ask us silly question about numbers of seeds in an orange, we don't get angry. 🤣

Answer 2

then use svg

Answer 3

I understand your question. I refer to the question you asked before you modified your question.

Answer 4

okay. thanks you very much

Answer 5

thanks, but you didnt understand
i want the rect to go in a ^ way
from 0x 0y to 300x 100y and then to 600x 0y