title: How to make css transition effect apply to all its children?
body: <p>What im trying to do is make a global class</p>
  
  <pre><code>.animate {
      -webkit-transition:0.2s;
      -moz-transition:0.2s;
      -o-transition:0.2s;
      transition:0.2s;
  }
  </code></pre>
  
  <p>and apply it as </p>
  
  <pre><code>&lt;div class="element animate"&gt;
  &lt;div class="child"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>however, whenever I try</p>
  
  <pre><code>.element:hover .child{
      background:#000;
  }
  </code></pre>
  
  <p>it doesnt apply the transition. Is there any way to do this? or do I just have to apply .animate to every child element?</p>
  
  <p>Also, about what Im trying to do, is it practical?</p>
  
  <p>Thanks!</p>