在一個懸停類中有多個CSS3動畫

Question

我希望圖片具有動畫，並且我希望文本具有動畫。

這就是我到目前爲止。

類：

.post-image:hover{ 
     animation: picanim 1s; 
     -webkit-animation: picanim 1s; 
     -webkit-animation-fill-mode: forwards; 
     animation-fill-mode: forwards; 
} 

動畫：

@-webkit-keyframes picanim { 
0%{opacity: 1; -webkit-border-radius: 5px; -mo-border-radius: 5px; border-radius: 5px;} 
100%{opacity: 0.5; -webkit-border-radius: 20px; -mo-border-radius: 20px; border-radius: 20px;} 
} 

現在我想另一個動畫是.POST圖像內：懸停類，但是當我做到這一點，沒有動畫工作。

.post-image:hover{ 
    /*foto animatie */ 
    animation: picanim 1s; 
    -webkit-animation: picanim 1s; /* Safari and Chrome */ 
    -webkit-animation-fill-mode: forwards; 
    animation-fill-mode: forwards; 
    /*text animation*/ 
    animation: textAnim 1s; 
    -webkit-animation: textAnim 1s; /* Safari and Chrome */ 
} 

任何人都有解決方案嗎？

Answer 1

當你編寫兩個CSS規則時，第二個會覆蓋第一個，所以它不能以這種方式工作。

我看不到你的HTML結構，但我猜你有類似的東西：

<div class="post-image"> 
    <img src="image.jpg" alt="bla bla"/> 
    <p>figcaption for the image</p> 
</div> 

然後你就可以做這樣的事情的動畫文本和圖像

.post-image:hover img { 
    animation: picanim 1s; 
    -webkit-animation: picanim 1s; 
    -webkit-animation-fill-mode: forwards; 
    animation-fill-mode: forwards; 
} 
.post-image:hover p { 
    animation: textAnim 1s; 
    -webkit-animation: textAnim 1s; 
} 

Answer 2

這就是答案。我無法在動畫中添加文字。

<div class="post-image"> 
     <a href="#"> 
      <img src="http://velosofy.com/content/31.jpg" />  
      <p class="imgtxt">Title</p> 
     </a> 
</div> 


.post-image:hover{ 
    picture animation 
} 

.post-image:hover .imgtxt{ 
    text animation 
}