CSS3动画如何在:hover状态结束后继续播放

Question

CSS3动画如何在:hover状态结束后继续播放

19

我正在设置一种简单的动画，当您将鼠标悬停在图像上时，它会显示一些附加信息。jQuery后备部分已编写并正常工作，但我遇到的问题是在用户悬停时使CSS3动画反向运行。

因此，当您悬停时，它很好地工作，但是一旦您悬停在其他位置，元素就会消失。我想知道的是是否有一种方法可以让它们在鼠标悬停在其他位置时向后动画。非常感谢！

#recent-work div { position: relative; width: 300px; height: 168px; overflow: hidden; }
                
                #recent-work div:hover .recent-project-type {  
                    animation-name: showType;
                    animation-duration: .5s;
                    animation-timing-function: ease;
                    animation-delay: 0;
                    animation-iteration-count: 1;
                    animation-direction: normal;
                    animation-play-state: running;
                    -moz-animation-name: showType;
                    -moz-animation-duration: .5s;
                    -moz-animation-timing-function: ease;
                    -moz-animation-delay: 0;
                    -moz-animation-iteration-count: 1;
                    -moz-animation-direction: normal;
                    -moz-animation-play-state: running;
                    -webkit-animation-name: showType;
                    -webkit-animation-duration: .5s;
                    -webkit-animation-timing-function: ease;
                    -webkit-animation-delay: 0;
                    -webkit-animation-iteration-count: 1;
                    -webkit-animation-direction: normal;
                    -webkit-animation-play-state: running;
                    top: 0;
                }
                
                #recent-work div:hover .recent-project-title {  
                    animation-name: showTitle;
                    animation-duration: .5s;
                    animation-timing-function: ease;
                    animation-delay: 0;
                    animation-iteration-count: 1;
                    animation-direction: normal;
                    animation-play-state: running;
                    -moz-animation-name: showTitle;
                    -moz-animation-duration: .5s;
                    -moz-animation-timing-function: ease;
                    -moz-animation-delay: 0;
                    -moz-animation-iteration-count: 1;
                    -moz-animation-direction: normal;
                    -moz-animation-play-state: running;
                    -webkit-animation-name: showTitle;
                    -webkit-animation-duration: .5s;
                    -webkit-animation-timing-function: ease;
                    -webkit-animation-delay: 0;
                    -webkit-animation-iteration-count: 1;
                    -webkit-animation-direction: normal;
                    -webkit-animation-play-state: running;
                    bottom: 0;
                }
            
            .recent-project-title { position: absolute; left: 0; right: 0; bottom: -34px; padding: 8px 10px; background: rgba(0,0,0,.75); text-decoration: none; border: 0; font-size: 20px; font-weight: 400; color: #fff; }
                .recent-project-title:hover { color: #ff9900; text-decoration: none; }
                
            .recent-project-type { position: absolute; left: 0; top: -26px; padding: 4px 8px; font-size: 12px; font-weight: 600; background: #ff9900; text-transform: uppercase; color: #111; }
                .recent-project-type:hover { color: #fff; text-decoration: none; }

@keyframes showType {
    from { top: -26px; }
    to { top: 0; }
}

@-moz-keyframes showType {
    from { top: -26px; }
    to { top: 0; }
}

@-webkit-keyframes showType {
    from { top: -26px; }
    to { top: 0; }
}

@keyframes showTitle {
    from { bottom: -34px; }
    to { bottom: 0; }
}

@-moz-keyframes showTitle {
    from { bottom: -34px; }
    to { bottom: 0; }
}

@-webkit-keyframes showTitle {
    from { bottom: -34px; }
    to { bottom: 0; }
}

<div class="row" id="recent-work">
            <div class="span-one-third">
                <a href="#" class="recent-project-image"><img src="http://dl.dropbox.com/u/1762184/recent-work01.png" width="300" height="168"></a>
                <a href="#" class="recent-project-title">Philly</a>
                <a href="#" class="recent-project-type">Video</a>
            </div>
</div>

- Andrew

目前的动画效果很棒。+1 我会看看能否找出反向操作的方法。 - John Riselvato

1

谢谢，约翰。看看bookcasey的答案，比我想的简单多了。 - Andrew

3个回答

2

这也可以使用CSS转换来完成，虽然不如JS强大，但更简单。思路是将一个包含顶部和底部链接的div放置在另一个包装器div中，但它比包装器div大，以便部分内容被隐藏。当你将鼠标悬停在其上时，它会缩小高度，从而使链接可见。

为了让它来回动画，你需要在该div的css中添加“transition：height 1s”。如果我以后有时间，我会尝试写出来。

- idanzalz

1

我认为如果你将动画添加到非悬停状态，你就可以让它们过渡回来。请看我的超级简单的例子这里。

- user641656

是的，即使您从悬停状态中删除“transition”属性，它仍然有效 :) - Madara's Ghost

使用类似于您示例中的过渡的缺点是它只影响它所在的元素，因此不可能有更复杂的动画（例如通过悬停一个元素来影响其他元素）。 - idanzalz

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- bookcasey · Accepted Answer

对于这种简单的东西，您不需要使用关键帧。

我为您制作了一个演示（只使用了-webkit供应商前缀以保持简单）。