How to make an image 'pop out' when page is loaded (using jQuery or possibly CSS transitions)

I'm looking for a way to make an image transition from being 10px wide and 10px high into it's full size version on load of a w开发者_StackOverflow中文版ebpage. This way the image will 'pop out'.

I've looked into CSS transitions, but it seems they can only be triggered by a :hover or other pseudo state. I'm looking for a way this happens without user intervention. Can anyone point me in the right direction?

Thank you!

Look into the animate() function in jQuery. There is an example similar to what you're requesting, however, it is fired via an onClick event handler. Just place the code appropriately:

$(document).ready(function(){
  $("#block").animate({
    width: "70%",
    opacity: 0.4,
    marginLeft: "0.6in",
    fontSize: "3em",
    borderWidth: "10px"
  }, 1500 );
});

To add multiple images, you could create an array and use setInterval to loop through each value of the array and run the animate function on the current image based off of the array index.

If I may do a little plug, here's a jQuery plugin of mine that might be used for this purpose: http://odyniec.net/projects/imgzoom/