How can i execute a css3 transition when the document loads using javascript?

Question

i was just wondering if i could make a form slide when the page loads

 <!DOCTYPE html>
 <html>
 <head>
 <link rel="stylesheet" href="css/gi.css">

 </head>
 <body onload='document.getElementById("form1").style["-webkit-transform"] = "translateX(100px);"'>
 <form action='gi.php' method='post' id='form1'>
 <!-- form elements -->
</form>
</body>
</html>

that's the code im working on

note: this html will be placed inside an iframe

any responses would be appreciated

Answer 1

You can try something like this

 form { transform: translateX(1000px); -webkit-animation: move 2s forwards; } @-webkit-keyframes move { 100% { transform: translateX(0) } }

 <form action='gi.php' method='post' id='form1'> <input type="button" value="button"> <input type="button" value="button"> <input type="button" value="button"> <input type="button" value="button"> <input type="button" value="button"> <input type="button" value="button"> </form>

How can i execute a css3 transition when the document loads using javascript?

Question

1 answers

solution1
2 ACCPTED 2015-04-13 07:33:33

How can i execute a css3 transition when the document loads using javascript?

Question

1 answers

solution1 2 ACCPTED 2015-04-13 07:33:33

solution1
2 ACCPTED 2015-04-13 07:33:33