如何使悬停出CSS动画扭转？ [英] How to make CSS Animation reverse on hover-out?

问题描述

我有我的网站上从进入动画的 宽度：100像素至800像素当的悬停

I have an animation on my site which goes from width: 100px to 800px when hover on.

但是，当的盘旋了的，它只是与没有动画的正常位置。

But when hover out, it just goes to the normal position with no animation.

我怎么能拿这么动画会回到悬停出它来了悬停以同样的方式？

How could I get it so the animation would go back on hover-out the same way it came on hover?

我只找到了解决方案的转变，但我需要它的动画。

I only found solutions for transitions, but I need it for animation.

<div id="blackbox"/>
<div id="blacktxt">
Navigation
</div>

看到这里

推荐答案

为什么不使用转场，而不是动画？ 工作的jsfiddle

Why not use transitions instead of animations? Working jsFiddle

#blackbox {
    background: black;
    width: 100px; 
    height: 80px; 
    color: white; 
    text-align: center; 
    font-family: Times; 
    font-size: 20px;
    position: fixed;
    left: 0px;
    bottom: 100px;
    opacity: 0.5;
    margin-bottom: 10px;
    transition: all 2s; /* Add this transition */
}


#blackbox:hover { /* Apply the new design on hover */
    opacity: 0.8;
    width: 800px;
}

#blacktxt {
    margin-top: 10px;
    height: 60px;
    transition: opacity 0.5s, width 5s;
    position: absolute;
    font-family: cursive;
    cursor: default;
}

#blacktxt:hover {
    opacity: 0;
}

这篇关于如何使悬停出CSS动画扭转？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！