CSS @keyframes hover动画移出时反向播放实现问题咨询

问题原因 #

你仅在hover状态下为元素绑定了正向动画，当光标移出、hover状态失效时，动画会直接中断，元素会瞬间跳回初始的clip-path属性值，没有过渡效果。

最优解决方案：使用CSS Transition实现 #

你的需求是两个状态的切换，不需要用到@keyframes，直接用transition即可天生支持双向过渡，修改后的CSS代码如下：

body {
   width: 100%;
   height: 100%;
   justify-content: center;
   align-items: center;
}

.grid-item {
    width: 300px;
    height: 400px;
    border-radius: 20px;
    background: red;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

#circle {
    width: 100%;
    height: 100%;
    background: lime;
    clip-path: circle(17%);
    overflow: hidden;
    /* 新增过渡属性，指定clip-path的变化时长 */
    transition: clip-path 1.5s ease;
}

/* hover时直接修改目标属性值即可，transition会自动完成过渡 */
.grid-item:hover #circle {
    clip-path: circle(250px at 80% -20%);
}

HTML代码无需修改，修改后移入、移出都会有平滑的过渡效果。

若必须使用@keyframes的实现方案 #

如果你的实际场景是更复杂的多关键帧动画，必须用@keyframes实现，可以给默认状态的元素也绑定反向动画，同时处理页面加载时的动画触发问题，代码如下：

@keyframes circle-animation {
    0% {
        clip-path: circle(17%);
    }
    100% {
        clip-path: circle(250px at 80% -20%);
    }
}

body {
   width: 100%;
   height: 100%;
   justify-content: center;
   align-items: center;
}

.grid-item {
    width: 300px;
    height: 400px;
    border-radius: 20px;
    background: red;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

#circle {
    width: 100%;
    height: 100%;
    background: lime;
    clip-path: circle(17%);
    overflow: hidden;
    /* 默认状态绑定反向动画，加0.1s延时避免页面加载时触发动画 */
    animation: circle-animation 1.5s reverse forwards 0.1s;
}

.grid-item:hover #circle {
    animation: circle-animation 1.5s forwards;
}

内容的提问来源于stack exchange，提问作者Nulaxz