How to fix CSS Transition on refresh

Question

Transition triggers on refresh and looks awful.

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

Expected Result: Smooth Hovereffect when hovering down from the object "text input"

Result: Smooth Hovereffect when hovering down from the object "text input, but when I refresh the page it runs the same transition and looks not very well (so if I'd do "transition: all 0.5 ease" it would even let the textbox pop up to it's size for example) In my case only the background-color transition is runned when refreshing the page