CODEWITHSUNDEEP
htmlcss
baron
baron

Reputation: 129

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%;
    }
}

Upvotes: 0

Views: 2711

Answers (1)

davidkonrad
davidkonrad

Reputation: 85558

100% of 300px is 300px. Set the real height in cssanim - then it wont stretch (here 900px as mentioned above) you can let the height 300px be in #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%;
    }
}

Note : tested with 1.gif which is 233 x 282 px, so above should be valid along with your image also. jsfiddle http://jsfiddle.net/dLGBX/ with a random wikipaedia-image.

Upvotes: 2

Related Questions