CSS突然转出

Question

当鼠标图标离开元素时，元素突然returns回到原始状态

（我在视频里展示过）

.productinfo {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 1%;
    margin-top: 3%;
    color: #ff0062;
    flex: 0 0 25%;
    border: 3px solid #FF00FF;
    transition: 1ms;
}

.productinfo:nth-child(-n+3) {
    margin-top: 1%;
}

.productinfo:hover {
    animation: changeColor 3s, changefontsize 5s forwards;
}

@keyframes changeColor{
    33%{border-top: 3px solid #4281A4;}
    66%{border-right: 3px solid #4281A4;}
    66%{border-left: 3px solid #4281A4;}    
    100%{border-bottom: 3px solid #4281A4;}
}


@keyframes changefontsize{
    0%{font-size: 5;}
    25%{font-size: 10;}
    50%{font-size: 15;}    
    100%{font-size: 25px;}
}

这是我当前的代码

Answer 1

这种基于 CSS transitions 的方法是否符合您的要求（仅显示 added/changed 代码）？

.productinfo {
    transition: border 3s linear, font-size 5s linear;
}

.productinfo:hover {
    border: 3px solid #4281A4;
    font-size: 25px;

}

CSS突然转出

CSS suddenly transition out

html

css

transition