Transition loads when screen loads - css

Question

I'm having a border transition on a focus. When I focus the input field, I want the border to change color. This works.
What I don't want is to let the border load when the page load, which it does now. Why is it doing this?
<input type="stad" name="stad" value=""/>
input {
border: 7px #227a7b solid;
height: 20px;
width: 200px;
background: #1a5a78;
/* Old browsers */
background: -moz-linear-gradient(-45deg, #1a5a78 0%, #11c7b8 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #1a5a78), color-stop(100%, #11c7b8));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #1a5a78 0%, #11c7b8 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #1a5a78 0%, #11c7b8 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #1a5a78 0%, #11c7b8 100%);
/* IE10+ */
background: linear-gradient(135deg, #1a5a78 0%, #11c7b8 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a5a78', endColorstr='#11c7b8',GradientType=1 );
/* IE6-9 fallback on horizontal gradient */
padding: 5px;
margin-top: -50px;
transition: 1s border;
}
input:focus {
outline: none;
border: green 7px solid;
}