无法弄清楚如何将第 n 种类型选择器与过渡相结合

Question

我有一系列div，其中有图像。我正在交替图像浮动在div的哪一边(第一个div向左浮动，下一个div向右浮动，等等)。当用户将鼠标悬停在div上时，图像会从一端平滑地过渡到另一端。

到目前为止，图像确实切换了，但它忽略了我试图实现的1s过渡。

我不太确定我是否正确地使用过渡来影响第n个类型的选择器。有人知道我做错了什么吗?

.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;
}

这是相关的html

<div class="introcard">
    <i class="fa fa-plus-circle"></i>
    <h1>Create</h1>
</div>
<div class="introcard">
    <i class="fa fa-pencil-square-o"></i>
    <h1>Modify</h1>
</div>
<div class="introcard">
    <i class="fa fa-graduation-cap"></i>
    <h1>Learn</h1>
</div>

Answer 1

这里缺少} &:nth-of-type(even) { .fa { float: right; }

否则，应该在W3C CSS验证器上检查代码。对于HTML也是如此。

EDIT:你不能在float上有一个过渡。唯一的方法应该是将过渡应用到"值参数"，如right left margin-right margin-left…等等，甚至以transform: translateX(-200px);为例。

好运'