mouseleave上的CSS反向动画

Question

我有一个两步的CSS动画,我希望在"激活"时向前运行一次,然后在"停用"时向后运行.我知道这是可以通过定义不同的向前和向后的动画,实现像这样,但我想知道如果这是一个单一的动画和可达到的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;

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

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