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-image：hover类中但是当我这样做时，没有一个动画可以工作。

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

一个悬停类中的多个CSS3动画

2 个答案: