title: I have problem with CSS transition, it doesn't work on the first run
body: <p>I'm new to CSS, I have a problem with my transition code, it only works after the first time I click it, the first time I click it, it just changed instantly with no effect ( transition ).</p>
  
  <p>Here is my code can some one help me ( explain ), Thank you.</p>
  
  <p>This is my CSS code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.holder {
    width: 400px;
    height: 400px;
    margin: auto;
    background-color: red;
    overflow: hidden;
    text-align: center;
  }
  
  .image-holder {
    width: 1200px;
    height: 400px;
    background-color: yellow;
    clear: both;
    position: relative;
    -o-transition: 5s;
    transition: 5s;
  }
  
  .button-holder {
    position: relative;
    top: -20px;
  }
  
  .button {
    display: inline-block;
    height: 10px;
    width: 10px;
    border-radius: 5px;
    background-color: brown;
  }
  
  .slider-image {
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
  }
  
  #change1:target~.image-holder {
    right: 0;
  }
  
  #change2:target~.image-holder {
    right: 400px;
  }
  
  #change3:target~.image-holder {
    right: 800px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="holder"&gt;
    &lt;span id="change1"&gt;&lt;/span&gt;
    &lt;span id="change2"&gt;&lt;/span&gt;
    &lt;span id="change3"&gt;&lt;/span&gt;
    &lt;div class="image-holder"&gt;
      &lt;img src="https://picsum.photos/400/400?image=1040" class="slider-image" alt=""&gt;
      &lt;img src="https://picsum.photos/400/400?image=1041" class="slider-image" alt=""&gt;
      &lt;img src="https://picsum.photos/400/400?image=1042" class="slider-image" alt=""&gt;
    &lt;/div&gt;
    &lt;div class="button-holder"&gt;
      &lt;a href="#change1" class="button"&gt;&lt;/a&gt;
      &lt;a href="#change2" class="button"&gt;&lt;/a&gt;
      &lt;a href="#change3" class="button"&gt;&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>