鼠标离开时的 CSS 反向动画

Question

我有一个两步 CSS 动画，我想在“激活”时向前运行一次，然后在“停用”时向后运行。我知道可以通过定义单独的前进和后退动画来实现，like so ，但我想知道这是否可以通过单个动画和 animation-direction: reverse 属性来实现。

Answer 1

是这样的吗？如果是这样，您正在寻找的是

-o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;

如果您需要将其附加到点击，您可以向其添加脚本，以便使用 onClick 实现 toggleClass

#test{
    position:absolute;
    height: 100px;
    width: 100px;
    background-color: #A8A8A8;
    border-bottom: 0px solid black;
    
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#test:hover{
    border-bottom: 10px solid black;
}

<div id="test">
</div>