How to remove the initial animation?

Question

css

Guys, I made animation with css using transition. Here is html

<div class='euraziabutton'><nav>Евразия</nav></div>

Everything seems to be clear
here) But KSS

div {
    -webkit-transition: background-color .5s ease-in-out;
    -moz-transition: background-color .5s ease-in-out;
    -o-transition: background-color .5s ease-in-out;
    transition: background-color .5s ease-in-out;
}
.euraziabutton {
    width: 20%;
    height: 80px;
    background: #5863e0;
    margin-left: 20%;
    position: absolute;
    border-right: 3px solid orange;
    border-left: 1px solid #5863e0;
    border-top: 1px solid #5863e0;
    border-top-left-radius: 50px;
    text-align: center;
    padding-bottom: 30px;
    
}
.euraziabutton:hover {
    background-color: #757DE1;
    
}

In theory, when you hover over a block, it will change the background to a lighter one. This is what happens, but there is a problem: the fact is that when you first enter the page, this block is transparent for a few seconds, and then gradually acquires a dark blue color. Just how to remove its initial animation?