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

Akshay · Accepted Answer · 2015-04-13 07:33:33Z

2

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>

answered Apr 13, 2015 at 7:33

Akshay

14.4k5 gold badges49 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Thamus Over a year ago

thanks Akshay for the answer will that code run when the page loads ??

Akshay Over a year ago

@YesSir Yes you can try the snippet

Thamus Over a year ago

Hey dude thanks i just tried the code you gave it works fine ^-^ thanks.

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related