How to to type code with @keyframes to draw square trajectory on four steps animation.

Question

i try type animation, but... try this code...
html: <div></div>
css: div {
width:100px;
height:100px;
background-color:red;
border-radius:5px;
animation-name: mm;
-webkit-animation-name: mm;
-webkit-animation-delay:2s;
-webkit-animation-duration:4s;
}
}
@-webkit-keyframes mm {
25% {bottom:200px;}
50% {right:200px;}
75% {top:200px;}
100%{left:200px;}
}

Answer 1

animation: my 4s ease-out 5; // thus would repeat 5 times

Answer 2

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

Answer 3

is that what you want?
https://code.sololearn.com/Wy058cINPYDH/?ref=app

Answer 4

its working

Answer 5

thank god 😂😂

Answer 6

using top left properties the div don't make traces they just pop and disappear.... whereas about curve moves you need to check both properties while movement. like if you have to move right.. then you need to check the top distance remains constant.. similarly while moving upward the left distance must remain constant all the way

Answer 7

prefixer added..

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

Answer 8

Because it needs 2 animations, mx (move vertically) and my (move horizontally) with different animation delay ease-in and ease-out in order to create trajectory curvature movement.

animation-fillmode forwards is to set final destination at last movement position.

Answer 9

sorry, but, how to add repeat count to animaion?

Answer 10

content:" "
it is usually used with pseudo before and after classes..

Answer 11

ок.

Answer 12

add position:relative to ur CSS
and remove extra closing bracket'}'

Answer 13

do u have any referemce what you want to achieve?

Answer 14

recheck

Answer 15

Sami, code work!!! yes! that's what I need! thanks!

Answer 16

But, why if use top, left, right, bottom tags square start curve move?

Answer 17

why need tags:"content"" and animaion fill mode"?

Answer 18

help! how to type normal trajectory?

Answer 19

after, i add position:relative; but this not work. trajectory is curve...

Answer 20

No. This square must go to right on 200px, bottom, left, and top.
After i see output ans say:"WTFFFF?";