Div animate

Question

if i want to make a dive moves up and down infinte
how i can do this ? svg or canvas ?
also
if i want to animate with svg should i make the shape with it too , is it the only way ?

Answer 1

It does move

Answer 2

Shimaa if you want to animate a div use css... Check one of my codes i posted css animation.. It works fine on divs

Animate is used only for svg drawings

Answer 3

You can use any of the ways Canvas can be animated with javascript...

Css works with keyframes and for svg use animate tag it's special tag to animate svg drawings

Answer 4

Ya'iko
Lucky Luke
isn't key frames for color change not moving ?
and also
svg where can i put it ..
inside div tag ?

Answer 5

Shimaa Fikry
I don't know what else your definition of "move" is

Answer 6

Code Your CSS codes need to be auto prefixer before all browsers can support it.
Use this tool https://autoprefixer.github.io/

Answer 7

Shimaa Fikry
Keyframes is used for any type of CSS animation

Answer 8

Shimaa Fikry You can use keyframes for changing margin values and animate the rectangle.
Also, you can use svg anywhere, without plugins. See the examples in the lessons for more information.
https://www.sololearn.com/learn/HTML/2200/
Here is an example of SVG Animations (works only in web version of SoloLearn)
https://code.sololearn.com/WA8yPg48wxPy/?ref=app

Answer 9

Here one of the examples
https://code.sololearn.com/Wc0a37uOHoQ3/?ref=app

Answer 10

yah , I saw it but can't get it ..
pls... can u make it here

how can i make this div goes up and down for infinite .. like it floating ..
https://code.sololearn.com/WONhIvaavowZ/?ref=app

Answer 11

Take a look
https://code.sololearn.com/WPzwGf4B9p1r/?ref=app

Answer 12

Ya'iko
it doesn't move

Answer 13

It does move

Answer 14

Ya'iko
it doesn't really

Answer 15

An animated SVG

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

Answer 16

Hermen Gx
u mean if i want to animate with svg .. i can only animate shapes done with svg .. not other shapes ?
does the div consider a shape ?

Answer 17

Shimaa Fikry @keyframes can define any css animations including moving, change color, opacity, font sizes, width, height, left, top, bottom, right locations.

Use svg tag to form svg shape.

Answer 18

Simply use CSS' "@keyframes" feature

Answer 19

You can use either SVG animations or simple CSS3 Animations.
Here are some related lessons:
https://www.sololearn.com/learn/HTML/2213/
https://www.sololearn.com/learn/CSS/2253/
https://www.sololearn.com/learn/CSS/2254/

Answer 20

Code
Ur code really doesn't move
and sorry for my slow understanding I am knida new so it seems all alittle bit hard to me ..