mouseleave 上的 CSS 反向动画答案

【问题标题】：CSS Reverse Animation on mouseleavemouseleave 上的 CSS 反向动画
【发布时间】：2017-08-02 23:42:10
【问题描述】：

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

【问题讨论】：

标签： css css-animations

【解决方案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;

如果您需要将其附加到单击中，您可以向其添加脚本，以便 toggleClass 和 onClick

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

【讨论】：

【解决方案2】：

div {
    background: aqua;
    color: #fff;
    margin: 0 auto;
    padding: 100px 0; 
    -webkit-transition: -webkit-border-radius 1.5s ease-in;
    -moz-transition: -moz-border-radius 1.5s ease-in;
    -o-transition: border-radius 1.5s ease-in;
    -ms-transition: border-radius 1.5s ease-in;
    transition: border-radius 1.5s ease-in;
    text-align: center;
    width: 200px;
		
		-webkit-transition: all 3s ease;
    -moz-transition: all 3s ease;
    -o-transition: all 3s ease;
    -ms-transition: all 3s ease;
    transition: all 3s ease;
    -webkit-transform: rotate(-360deg);
    -moz-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    transform: rotate(-360deg);
}

div:hover {
    background: red;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    -webkit-transition: -webkit-border-radius 1.5s ease-in;
    -moz-transition: -moz-border-radius 1.5s ease-in;
    -o-transition: border-radius 1.5s ease-in;
    -ms-transition: border-radius 1.5s ease-in;
    transition: border-radius 1.5s ease-in;
		
		-webkit-transition: all 3s ease;
    -moz-transition: all 3s ease;
    -o-transition: all 3s ease;
    -ms-transition: all 3s ease;
    transition: all 3s ease;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}

&lt;div&gt;&lt;/div&gt;

【讨论】：