Html css转换能否保持最终状态？；

动画可以做到这一点，只需：

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

---

是的，你可以用纯CSS做一些接近你想要的事情。将以下内容添加到CSS中，只要它们悬停在对象上，它就会运行动画，动画完成后，它就会停止

.div-box {
    -webkit-animation-fill-mode: forwards;
    animation-play-state: paused;
}

.div-box:hover {
    animation-play-state: running;
}

---

您可以通过以下技巧模拟所需的行为：

.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 */
    }

---

移除鼠标后。。。你不能，你需要一个脚本