title: How to set and trigger an css transition from JavaScript
body: <p>I'm new to html5, css and javascript, And mostly I've just been playing around.
  What I want to do is to set and trigger a transition of a div. After the page is loaded, I manage to do that by setting a transition. But that doesn't feel very dynamic and doesn't seem the right way to go. I am thankful for any help</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;   
      &lt;style&gt; 
          body{
              text-align: center;
          }
  
          #dialPointer
          {
              position:relative;
              margin-left: auto;
              margin-right: auto;
              width:23px;
              height:281px;
              background:url(pointer.png);
              background-size:100% 100%;
              background-repeat:no-repeat;
  
              transform: rotate(-150deg);
              transition-duration: 2s;
              transition-delay: 2s;
  
              -webkit-transform: rotate(-150deg);
              -webkit-transition-duration:2s;
              -webkit-transition-delay: 2s;
          }
  
  
          /* I want to call this once */
          .didLoad
          {
              width:23px;
              height:281px;
              transform:rotate(110deg);
              -moz-transform:rotate(110deg); /* Firefox 4 */
              -webkit-transform:rotate(110deg); /* Safari and Chrome */
              -o-transform:rotate(110deg); /* Opera */
          }
  
          &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="dialPointer"&gt;&lt;/div&gt;
      &lt;script language="javascript" type="text/javascript"&gt;
          window.onload=function () {
              //But instead of using rotate(110deg), I would like to call "didLoad"
  
              document.getElementById("dialPointer").style.webkitTransform = "rotate(110deg)";
  
  
          };
          &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>