一个hover类中的多个CSS3动画

u91tlkcl 于 2023-04-01 发布在 CSS3

关注(0)|答案(2)|浏览(309)

我希望图片有一个动画，我希望文本有一个动画。
这是我目前得到的。
课程：

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

有人有办法吗？

css

来源：https://stackoverflow.com/questions/20956693/multiple-css3-animations-in-one-hover-class

2条答案

按热度按时间

x8diyxa71#

当你编写这两个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; 
    animation-fill-mode: forwards;
}
.post-image:hover p {
    animation: textAnim 1s;
}

赞(0）回复(0）举报 2023-04-01

c2e8gylq2#

这就是答案。我无法在动画中添加文本。

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

赞(0）回复(0）举报 2023-04-01

我来回答

一个hover类中的多个CSS3动画

2条答案

相关问题

热门标签

最新问答