title: Can't figure out how to combine nth-of-type selector with transitions
body: <p>I have a series of divs that have images in them.  I'm alternating which side of the div the image floats do (1st div it floats left, next it floats right, and so on).   I'm trying to make it so that when the user hovers over the div, the image smoothly transitions from one end to the other.</p>
  
  <p>With what I have so far, the image does switch sides, but it is ignoring the 1s transition I'm trying to implement.</p>
  
  <p>I'm not quite sure I'm using the transition properly to affect nth-of-type selectors.  Does anyone see what I'm doing wrong?</p>
  
  <pre><code>.introcard {
    -webkit-transition: float 1s;
    transition: float 1s;
  }
  .introcard i {
    color: white;
    font-size: 140px;
    margin: auto 80px;
    vertical-align: middle;
    line-height: 200px;
  }
  .introcard:nth-of-type(odd) .fa {
    float: left;
  }
  .introcard:nth-of-type(even) .fa {
    float: right;
  }
  .introcard:hover:nth-of-type(odd) .fa {
    float: right;
  }
  .introcard:hover:nth-of-type(even) .fa {
    float: left;
  }
  </code></pre>
  
  <p>here's the relevant html</p>
  
  <pre><code>&lt;div class="introcard"&gt;
      &lt;i class="fa fa-plus-circle"&gt;&lt;/i&gt;
      &lt;h1&gt;Create&lt;/h1&gt;
  
  &lt;/div&gt;
  
  &lt;div class="introcard"&gt;
      &lt;i class="fa fa-pencil-square-o"&gt;&lt;/i&gt;
      &lt;h1&gt;Modify&lt;/h1&gt;
  
  &lt;/div&gt;
  
  &lt;div class="introcard"&gt;
      &lt;i class="fa fa-graduation-cap"&gt;&lt;/i&gt;
      &lt;h1&gt;Learn&lt;/h1&gt;
  
  &lt;/div&gt;
  </code></pre>