why css transition applies when is not supposed to? - css

Question

I have this code here in CSS:
#submit{
border: 2px solid white;
width: 100px;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border-radius: 30px;
padding: 10px;
outline: none;
color : #fff;
transition: background-color 0.25s;
}
#submit:hover{
background: #bbb;
}
And the problem is that when i try it on my page the transition effects applies to the first background :none that i put, so when you enter the page it seems to change from the original background to none in 0,25s as the transition especifies. If i don´t misunderstand transitions this shouldn´t be happening, what is the problem? In case i´m wrong, how do you make that the transition effects apply after the the background changes in the beginning. Thank you!

Answer 1

Added some HTML to make this readable. Run the code and notice the changes. As you have written in your code, you have set the transition to be on hover, so it only applies whenever you hover your mouse over the container with the submit id.
#submit{
border: 2px solid white;
width: 100vh;
height: 80vh;
background-color: red;
display: block;
margin: 20px auto;
text-align: center;
border-radius: 30px;
padding: 10px;
outline: none;
color : #fff;
transition: 0.25s;
}
#submit:hover{
background: #bbb;
color: black;
}
<div id="submit">
<h1>Content</h1>
</div>