div 요소 내의 CSS3 이미지 애니메이션이 늘어납니다.

Question

<div> 요소 안에 "스크롤링"될 &의 큰 이미지를 배치하려고합니다. 문제는 이미지의 크기가 #animation-win div 요소의 크기로 늘어났습니다. 이미지의 높이가 300px보다 큽니다. 따라서 &을 위로 스크롤하여 300px div 요소 내에서 원래 크기로 나타날 수 있습니다. 할 수 있습니까? 고맙습니다.

이

은 HTML입니다 :

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

이 내 CSS입니다 : 300 픽셀의

#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

100 % 300 픽셀입니다. cssanim의 실제 높이를 설정하십시오. 그런 다음 위에 언급 한대로 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 픽셀입니다 또한 이미지와 함께 유효해야합니다. 무작위 wikipaedia-image가있는 jsfiddle http://jsfiddle.net/dLGBX/.