加载页面时的缩放效果无法正常运行

Question

I am trying to get an effect which is to zoom in on a logo centred on the page when the page is loaded. I am using the following HTML and JS code:

<div style="display: table-cell; vertical-align: middle; text-align: center;">
    <img id="logo" src="images/logo2.png" style="zoom: 200%; transition: zoom 1s ease-in-out;"/>
</div>

JS

document.addEventListener("load", pageFullyLoaded, true);

function pageFullyLoaded()
{
    var elem = document.getElementById("logo");
    elem.style.zoom = "300%";
}

The result is really odd.

1. It display the logo in it's normal size,
2. then it jumps on a super zoomed in version of the logo (> 1000%),
3. zoom in on the logo even more (1000% to 1500% say) for the duration of the transition,
4. jump back to the normal logo size and position (which is correct, and this is the final positon and size I want).

So obviously this technique doesn't work:

1. the jump at the beginning is ugly but I only suppose this happens because 2) is incorrect anyway. As it should start by default with a zoom value of 200% (which is defined in the style of the div) and then the JS should make it zoom to 300%. So there should be no jump visible really.
2. I don't understand why I get this incredibly zoomed in version of the logo at the start of the animation. Basically it's almost like if the entire image was filling up the screen.

Any idea on how to do this reliably, please? Thank you.

Answer 1

If you're looking to scale an image, you don't need to use zoom or transform or anything. Just alter the width directly and the browser will scale the image for you:

http://jsfiddle.net/C4JZv/

HTML:

<div class="wrapper">
    <img class="tiny" src="http://placehold.it/200x150" />
</div>

CSS:

.wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.wrapper img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    transition: width 1s ease-in-out;
    width: 200px;
}

.wrapper img.tiny {
    width: 10px;
}

JS:

document.querySelector('.wrapper img').className = "";

EDIT : You mentioned in the comments that you wanted to see this done using transform . Again, it's just a case of having a shrunken image (using transform 's scale ), having a transition property and then removing the CSS class that shrinks the image:

http://jsfiddle.net/C4JZv/1/

HTML & JS: Same

CSS: Mostly the same, but with a couple of changes (plus a load of vendor prefixes):

.wrapper img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    -webkit-transition: -webkit-transform 1s ease-out;
    -moz-transition: -moz-transform 1s ease-out;
    -ms-transition: -ms-transform 1s ease-out;
    -o-transition: -o-transform 1s ease-out;
    transition: transform 1s ease-out;
}

.wrapper img.tiny {
    -moz-transform: scale(0.1);
    -webkit-transform: scale(0.1);
    -o-transform: scale(0.1);
    -ms-transform: scale(0.1);
    transform: scale(0.1);
}

Answer 2

I would do this in only CSS like so:

1. Set the image to scaleX and scaleY 0 (or hide it in some other way)
2. On $(window).load or $('document').ready add a class with keyframe animations
3. Do whatever you need afterwards.

Fiddle

$(window).load(function(){
    $('img.zoom').addClass('element-animation');
});

You can also listen to animation end events like so https://github.com/daneden/animate.css#usage

That library (Animate.css) is also pretty handy and you might be able to find some useful effects in it.