css - CSS3过渡无法正常工作

所以我有完全相同的CSS3过渡到地方，只是带有不同的标记。

一种是只使用包裹在锚定标记中的li中的图像，另一种是使用带有锚定标记的li标记，该标记中包裹了人物和无花果。

这是标记。

<ul class="teamProfiles">
    <li>
        <a href="#" title="Owner"><figure><img src="assets/images/players/playerKris.png" /><figcaption>Kris R</figcaption></figure></a>
    </li>
    <li>
        <a href="#" title="Owner"><figure><img src="assets/images/players/playerKris2.jpg" /><figcaption>Kris R</figcaption></figure></a>
    </li>
    <li>
        <a href="#" title="Designer & Code Ninja"><figure><img src="assets/images/players/playerJake.jpg" /><figcaption>Jake C</figcaption></figure></a>
    </li>
    <li>
        <a href="#" title="Writer"><figure><img src="assets/images/players/playerBacon.jpg" /><figcaption>Steven B</figcaption></figure></a>
    </li>
    <li>
        <a href="#" title="Laywer"><figure><img src="assets/images/players/playerJon.jpg" /><figcaption>John A</figcaption></figure></a>
    </li>
    <li>
        <a href="#" title="Accountant"><figure><img src="assets/images/players/playerAmy.jpg" /><figcaption>Amy A</figcaption></figure></a>
    </li>
    <li>
        <a href="#" title="We're Hiring"><figure><img src="assets/images/players/playerDarth.jpg" /><figcaption>You</figcaption></figure></a>
    </li>
</ul>

这是上面显示的标记的CSS。

.teamProfiles {
    width: 920px;
}
.teamProfiles > li {
    float: left;
    width: 65px;
    height: 85px;
    border: 3px solid #fff;
    box-shadow: 0 0 4px rgba(0, 0, 0, .3);
    margin-left: 3%;
    display: inline-block;
}
.teamProfiles > li:first-child {
    margin-left: 0;
}
.teamProfiles > li:last-child {
    margin-right: 3%;
}
.teamProfiles figcaption {
    padding-top: 4px;
}
.teamProfiles > li > a > figure {
    width: 65px;
    height: 65px;
}
.teamProfiles > li > a {
    display: block;
    height: 85px;
    width: 65px;
    text-decoration: none;
    text-align: center;
    font-family:"proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 600;
    font-size: .8em;
    font-smooth: always;
    -webkit-font-smoothing: antialiased;
    color: #333;
    position: relative;
    overflow: hidden;
}
.teamProfiles > li > a::after {
    content: attr(title);
    background: rgba(0, 0, 0, .5);
    display: inline-block;
    position: absolute;
    width: 65px;
    height: 40px;
    padding-top: 25px;
    top: -20px;
    left: 0;
    color: #9ecd41;
    -webkit-transition: all .5s ease-in-out .6s;
}
.teamProfiles > li > a:hover::after {
    top: 0;
}

我到底想念什么？这让我发疯，无法解决问题。

是的，我知道它只有-webkit-transition属性。那就是原因，我正在Chrome浏览器中解决该问题。因此，我只剩下了这个，打算先在Chrome中找到它。

任何发现我的愚蠢的帮助都会很棒！ :)

最佳答案

您是否尝试过为：hover伪代码删除:: after？