I want to give an effect of zoom out from 200% to 100%

Question

I'm using waypoints and jquery transit. I'm able to achieve the effect of zoom out from 200% to 100%. But for that i have to write all my css to default of 200% and then my jquery transit ake it scale 0.5 to normal size.

I mean is there a smart way to do it.

this is my fiddle http://jsfiddle.net/cancerian73/eJ2Mw/1/

.fortyone-mil {
font: bold 72px/72px"Trebuchet MS", Arial, Helvetica, sans-serif;
color: #1374a6;
text-align:center;
width:100%;
position:relative;
top:115px;
opacity:1;
}

you can see the text between the circle getting zoomed out

Answer 1

You can always use css3 transform to have zoom out / zoom in functionality.

jQuery

$(".fortyone-mil").transition({
  opacity: 1,
  scale: 1
}, 500, 'in');

CSS:

.fortyone-mil {
 -webkit-transform: scale(2);
    -moz-transform: scale(2);
      transform: scale(2);
}

Demo