Несколько анимаций CSS3 в одном классе hover

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 
}