Infinitely Zooming Image in CSS3

by on 02/05/10 at 2:29 am

After my previous post on Social Icon In CSS3 , I have decided to work on CSS3 animation property. So during my search I found a very interesting post on Infinitely Zooming Image . This zooming effect is done in flash. So just for my own interest I tried this Zooming image effect in CSS3.

Zooming Effect

The above image is just a snapshot of my work , the original output can be viewed here  DEMO (this CSS animation will work only on Chorme and safari).

Now let go through the code.


 <div class='imageOuter' >
<img class='img' id='ani' src='/image/pic.jpg'>


        -moz-box-shadow:0px 0px 14px #4FB8FF;
        -webkit-box-shadow:0px 0px 14px #4FB8FF;
        border:2px solid #FFF;
        -moz-box-shadow:0px 0px 14px #888;
        -webkit-box-shadow:0px 0px 14px #888;
        border:2px solid #FFF;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-timing-function: ease-out;
#ani {
        -webkit-animation-name: zoom;
        -webkit-animation-duration: 0.9s;
@-webkit-keyframes zoom {
  0%{ width: 815px;height:1050px;margin-left:-279px;margin-top:-350px;}
 100%{ width: 200px;height:255px;margin-top:0px;margin-left:0px;}

I just want to thank John Bezanis for the  flash post , from where I get this animation idea.
Hope you guys like it . Please don’t forget to drop your comments because those comment are real value for me.

9 Responses to “Infinitely Zooming Image in CSS3”

  1. Matthew James Taylor

    May 2nd, 2010

    Nice affect!

    Why do you have a closing image tag? () you can self-close a tag with a forward slash at the end like this ().

  2. steve

    May 2nd, 2010

    nice work, thanks for sharing

  3. cna training

    May 2nd, 2010

    Wow this is a great resource.. I’m enjoying it.. good article

  4. nikesh

    May 2nd, 2010

    @steve @cna … thanks for your comments ..

  5. MarkSpizer

    May 3rd, 2010

    great post as usual!

  6. Simon

    May 17th, 2010

    awesome bud – keep it up.

  7. Cassandra Casolary

    Apr 19th, 2012

    I believe one of your ads caused my browser to resize, you may well want to place that against your black list.

  8. seo techniques

    Jul 28th, 2014

    I do not even know how I ended up here, but I believed this put up used to be good.
    I do not recognize who you are however certainly you’re going to a well-known blogger if you are not already.

Leave a Reply