html - css transition transform 可以保持结束状态吗？

Question

动画可以做到，只是:

-webkit-animation-fill-mode: forwards;

但是‘transition’，怎么办让悬停状态的div‘end’使用‘transition’

.div-box{
        position: relative;
        top:0;
        left: 0;
        width: 100px;
        height: 100px;
        background: red;
        transition:all 1s linear ;
    }
    .div-box:hover{
        transform: translate(100px,0);
    }

Answer 1

您可以使用以下技巧模拟您需要的行为:

.div-box{
        position: relative;
        top:0;
        left: 0;
        width: 100px;
        height: 100px;
        background: red;
        transition:all 1s linear 99999s; /* huge delay for non-hovered state! */
    }
    .div-box:hover{
        transform: translate(100px,0);
        transition:all 1s linear; /* immediate transition start on hover */
    }