Question

动画可以做到，只需：

-webkit-animation-fill-mode: forwards;

但是'过渡'，我能做些什么让div＆＃39;结束＆＃39;在悬停状态下使用＆＃39;过渡＆＃39;

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

Answer 2

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

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

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

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

2 个答案: