如何使CSS动画在悬停时反转？

耶瑟·恩戈尔德

我的网站上有一个动画，该动画是从width: 100px to 800px将鼠标悬停在上开始的。

但是，当鼠标悬停时，它只会移动到正常位置而没有动画。

我如何获得它，以便动画可以像悬停一样返回悬停状态？

我只找到过渡的解决方案，但动画需要它。

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

看这里

Yotam单体

为什么不使用过渡而不是动画？工作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;
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。