css3控制多重动画效果

今天看到一个类似于门窗开关效果。想着用css3实现，当然js是可以必须能够实现的。我主要想体验一把css3的神奇。

0102

01图片缩小，缩小到看不到之后，出现02图片放大的效果。

实现原理：用一个外层div来触发hover效果，里面套两个图片div，

分别为图一和图二

主要使用css3的transform和transition效果，而且比较重点的是transition-delay延时属性。

具体代码

html--------------------------

 <div id="out">
      <div id="in1"> <img src="./images/990ad_01.jpg"></div>
      <div id="in2"> <img src="./images/990ad_03.jpg"></div>
    </div>

css部分---------------------------------------

<span style="white-space:pre">	</span>#out{ width:321px; height:339px; overflow:hidden; position:relative;}
    #in1{ float:left;}
    #in2{ display:block; float:left;transform:scale(0,1); -webkit-transform:scale(0,1);-moz-transform:scale(0,1); -o-transform:scale(0,1);-ms-transform:scale(0,1);  }
    #out:hover #in1{ transform:scale(0,1); -webkit-transform:scale(0,1);-moz-transform:scale(0,1); -o-transform:scale(0,1);-ms-transform:scale(0,1); 
<span style="white-space:pre">	</span>transition:all 0.5s linear; -webkit-transition:all 0.5s linear;-moz-transition:all 0.5s linear; -o-transition:all 0.5s linear;-ms-transition:all 0.5s linear;}
    #out:hover #in2{ transition:all 0.3s linear 0.35s;-webkit-transition:all 0.3s linear 0.35s;-moz-transition:all 0.3s linear 0.35s; -o-transition:all 0.3s linear 0.35s;-ms-transition:all 0.3s linear 0.35s;
<span style="white-space:pre">	</span>transform:scale(1,1);-webkit-transform:scale(1,1);-moz-transform:scale(1,1); -o-transform:scale(1,1);-ms-transform:scale(1,1);
    display:block; float:left; position:absolute; top:0px; left:0px;}