zoomIn、zoomOut---动画

第一种方式：zoomIn-zoomOut动画

CSS代码为：

.pages .p3 img{ width: 100%;}
.item-01{ position: absolute; left: 50px; top: 50px; width: 300px;-webkit-animation: zoomIn 2s ease 1.5s 1 both;}
.item-02{ position: absolute; left: 10px; top: 300px; width: 600px;-webkit-animation: zoomOut 2s ease 0s 1 both;}
.item-03{ position: absolute; left: 150px; top: 380px; width: 350px;-webkit-animation: zoomOut 2s ease 1s 1 both;}
@-webkit-keyframes zoomIn{
  0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}
  50%{opacity:1}
}
@keyframes zoomIn{
  0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}
  50%{opacity:1}
}
.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}
@-webkit-keyframes zoomOut{
  0%{opacity:1}
  50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}
  100%{opacity:0}
}
@keyframes zoomOut{
  0%{opacity:1}
  50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}
  100%{opacity:0}
}
.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut}

本地效果为：app/html5_animation/zoomIn-zoomOut.html