CSS3 Control multiple animation effects

See today a similar to the door and window switch effect. Think of using CSS3 to achieve, of course, JS can have to be able to achieve. I mainly want to experience the magic of a CSS3.

0102

01 Picture Zoom Out, zoom out to see, 02 image magnified effect appears.

Implementation principle: With an outer div to trigger the hover effect, inside a set of two picture Div,

Figure I and figure II, respectively

The transform and transition effects of CSS3 are mainly used, and the focus is on the Transition-delay delay attribute.

Specific code

HTML--------------------------

<div id= "Out" >      <div id= "in1" > </div>      <div id= " In2 "> </div>    </div>

#out {width:321px; height:339px; overflow:hidden; position:relative;}    #in1 {float:left;}    #in2 {display:block; Float:left;transform:scale (0,1);}    #out: hover #in1 {transform:scale (0,1); Transition:all 0.5s linear;}    #out: hover #in2 {transition:all 0.3s linear 0.35s;transform:scale ();    Display:block; Float:left; Position:absolute; top:0px; left:0px;}