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

最佳答案

像这样吗?如果是这样,您正在寻找的是

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

如果需要将其附加到单击上,则可以向其中添加脚本,以便将toggleClassonClick一起使用

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

关于mouseleave上的CSS反向动画,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/42755475/

10-13 01:57