CSS3トランジションが正しく動作しない

Question

異なるマークアップを使用して、まったく同じCSS3トランジションをプレースに適用しました。

ここ

マークアップ..です1は、アンカータグに包まれた李内だけで画像を使用している、と1つの数字とfigcaptionをラップするものの内のアンカータグ付きの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プロパティしか持っていないことを知っています。 Thatsは私がそれを理解するためにChromeで働いています。私はそれらをすべて持っていて、すべてのブラウザで試してみましたが、何も働いていませんでした。だから私はちょうどこれを残して、まずChromeでそれを理解しようとしていました。

私の愚かさを見つけようとするどんな助けも素晴らしいだろう！ :)

Answer 1

あなたは:: afterを削除しようとしましたか：ホバー疑似？