title: CSS3 transition with Javascript
body: <p>i have this Webpage on which with mouse over, the element rotates and goes back to original position on mouseout.  </p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style type="text/css"&gt; 
  div
  {
  width:100px;
  height:100px;
  background:red;
  transition:width 2s;
  -moz-transition:width 2s; /* Firefox 4 */
  -webkit-transition:width 2s; /* Safari and Chrome */
  -o-transition:width 2s; /* Opera */
  }
  
  div:hover
  {
  width:300px;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;p&gt;&lt;b&gt;Note:&lt;/b&gt; This example does not work in Internet Explorer.&lt;/p&gt;
  
  &lt;div&gt;&lt;/div&gt;
  
  &lt;p&gt;Hover over the div element above, to see the transition effect.&lt;/p&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;  
  </code></pre>
  
  <p>Now Is it possible to trigger this transition using JavaScript and not the defualt hover function. I tried by creating two different class names but it just dosent work even if i do it by adding delay and changing the class. Is there anyway to do such a transition with Javascript??</p>