CSS3 image animation inside a div element stretches

CSS3 image animation inside a div element stretches

I want to place a large image that would be "scrolling" up & down inside a
<div> element. The problem is that the images' size is stretched to the
size of the #animation-win div element. The images' height is greater than
300px, so that is the reason why I want to scroll it up&down so it can
appear in its original size within the 300px div element. Can it be done?
Thank you very much.
This is the html:
<div id="animation-win">
<div class="anim">
</div>
</div>
This is my CSS:
#animation-win {
background:#000;
position: relative;
width:900px;
height:300px;
}
.anim
{
background-image:url('../images/picture1.jpg');
background-size: 100% 100%;
position:absolute;
animation:cssanim 5s infinite;
animation-direction:alternate;
/* Safari and Chrome */
-webkit-animation:cssanim 5s infinite;
-webkit-animation-direction:alternate;
}
@keyframes cssanim
{
0% {background:red; left:0px; top:0px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes cssanim /* Safari and Chrome */
{
0%{
background-image:url('../images/picture1.jpg');
width:100%;
height:100%;
left:0px;
top:0px;
background-size: 100% 100%;
}
100% {
background-image:url('../images/picture1.jpg');
width:100%;
height:100%;
left:0px;
bottom:549px;
background-size: 100% 100%;
}
}