Question

I’m trying to achieve a small animated intro to a website. Basically I want a centralised image to crop equally from top and bottom and then move up to the top of the screen.

So far I have the following: http://dk8.co/animation.html

This is using the following CSS:

      #pic {
        position:absolute;
        top:0%;
        width: 100%;
        height: 200px;
        left: 0px;
        background:url(web/images/AM-title.jpg) no-repeat;
         -moz-background-size:100% auto;
         -webkit-background-size:100% auto;
         -webkit-background-position:0% auto;
         background-size:100% auto;
         -o-background-size: 100% auto;
        -webkit-animation-name: move;
        -webkit-animation-duration: 2s;
        -webkit-animation-iteration-count: 1;
        -webkit-animation-timing-function: ease-in;
    }




    @-webkit-keyframes move {
    0% {
        top: 50%;
        height: 400px;
    }

        50% {
        top: 50%;
        height: 300px;
    }
}

However, the problem is that the “cropping” is occurring from just the bottom up rather than from top and bottom.

Is there any way of achieving an equal cropping effect on the top and the bottom?

Answer 1

The very simple solution is to assign 50% to the background-position property, or simply add 50% to the shorthand you have above:

background: url(web/images/AM-title.jpg) 50% 50% no-repeat;

Here is a working example: http://jsfiddle.net/sl1dr/L3sQW/