如何在刷新时修复CSS过渡

Question

转换会在刷新时触发，并且看起来很糟糕。

.text-input {
    height: 50px;
    width: 100%;
    outline: 0 none;
    margin-bottom: 30px;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 25px;

    border: 0;

    transition: background-color 0.2s ease-in-out;
}

.text-input:hover {
    background-color: #f6f6f6;
    transition: background-color 0.2s ease-in-out;
}

预期结果：从对象“文本输入”向下悬停时，平滑的悬停效果

结果：当从对象“文本输入”向下悬停时，平滑的Hovereffect，但是当我刷新页面时，它会运行相同的过渡效果，看起来效果不是很好（因此，如果我执行“ transition：全部为0.5缓解”，它甚至会让文本框弹出其大小）例如，在我的情况下，刷新页面时仅运行背景颜色转换