title: Is there a way to start css transition without using trigger events?
body: <p>I looked for hours on the internet but didn't find anything about starting css transition without using trigger events.. I'm not using it for a website but for a kind of advertisement. 
  this is what i got: [(jsfiddle)][1]</p>
  
  <pre><code>    body{
      width:1920px;
      height:1080px;
      margin:0;
      padding:0;
      background: #FFF;
  }   
  
  #box{
      position: absolute ;    
      left: 0px;
      top: 0px;
      width: 800px;
      height: 140px;
      border:solid 5px #000;
      transition: width 5s linear 2s;
      overflow:hidden;
  }
  #box:hover{
      left: 0px;
      height: 140px;
      width: 0px;
  }
  img{
      display: inline-block;
      left: 100px;
      margin-top: 20px;
      width: 100px;
      height: 100px;
      position: absolute
  }
  .song1{
      position: absolute;
      left: 250px;
      margin-top: 20px;
      display: inline-block;
      font-size: 20px;
      width: 260px;
      height: 120px;
  }
  .song2{
      position: absolute;
      left: 350px;
      margin-top: 40px;
      display: inline-block;
      font-size: 20px;
      width: 260px;
      height: 120px;
  }
  
  &lt;/style&gt;
  &lt;script&gt;
  
  
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="box"&gt;
      &lt;img src="/Users/ts/Desktop/1.png" class="album"&gt;
      &lt;div class="song1"&gt;NOW --&gt; &lt;/div&gt;
      &lt;div class="song2"&gt;NEXT --&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Hope someone can help me</p>