html - div 元素内的 CSS3 图像动画会拉伸(stretch)

Question

我想在 <div> 中放置一个上下“滚动”的大图像元素。问题是图像的大小被拉伸(stretch)到 #animation-win 的大小分区元素。图像的高度大于 300px，所以这就是为什么我想向上和向下滚动它以便它可以在 300px div 元素中以其原始大小显示的原因。可以吗？非常感谢。

这是 html:

<div id="animation-win">
 <div class="anim">
 </div>
</div>

这是我的 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%;
    }
}

Answer 1

300px 的 100% 是 300px。在 cssanim 中设置真实高度 - 然后它不会拉伸(stretch)(这里是 900px，如上所述)你可以让高度 300px 在 #animation-win 中。

0%{
    background-image:url('1.gif'); 
    width:100%;
    height:900px; /* <---- */
    left:0px; 
    top:0px;
    background-size: 100% 100%;
    }
100% {
    background-image:url('1.gif');
    width:100%;
    height:900px; /* <---- */
    left:0px; 
    bottom:300px; /* <--- so the area not get entirely black in a long moment */
    background-size: 100% 100%;
    }
}

注意:使用 1.gif 进行测试，它是 233 x 282 像素，因此上面的内容也应该与您的图片一起有效。 jsfiddle http://jsfiddle.net/dLGBX/带有随机的维基百科图片。