title: CSS 3 : Correct "transition-property" for translate operation
body: <p>I am using the following code  to achieve a simple <code>translation</code> of an object when its clicked. </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-js lang-js prettyprint-override"><code>$('#div1').on('click', function () {
      $(this).toggleClass('pushObject');
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#div1 {
      width:30px;
      height:30px;
      background-color:green;
      cursor:pointer;
      transition: all 0.5s ease;
  }
  #div1:hover {
      background-color:red;
  }
  
  .pushObject {
      transform: translate(250px, 0px);
      
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="div1"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>It works as expected, and I get a smooth 0.5 second animation for <code>all</code> the transitions(in this case <code>translate</code> as well as <code>hover</code>) as I have set the <code>transition-property</code> value in css to <code>all</code>.</p>
  
  <p>What I want is to limit this 0.5s <code>Transition</code> to <code>translate</code> only, and not to <code>hover</code>.</p>
  
  <p>This can be achieved by setting the correct <code>transition-property</code> in css, but I am unable to find the correct value.</p>
  
  <p>So what will be the correct value of <code>transition-property</code> here so that the animation applies to <code>translate</code> only and not to any other <code>transition</code>.</p>
  
  <p>Here is a <a href="http://jsfiddle.net/7mz2b/" rel="noreferrer">JsFiddle</a>.</p>