twisterInUp、twisterInDown---动画

第一种方式：twisterInUp-动画

CSS代码为：

.pages .p3 img{ width: 100%;}
.item-01{ position: absolute; left: 50px; top: 10px; width: 300px;-webkit-animation: twisterInUp 3s ease 1s 1 both;}
.item-02{ position: absolute; left: 100px; top: 300px; width: 400px;-webkit-animation: twisterInUp 3s ease 1.5s 1 both;}
@-webkit-keyframes twisterInUp{
  0%{opacity:0;-webkit-transform-origin:100% 0;-webkit-transform:scale(0,0) rotate(360deg) translateY(100%)}
  30%{-webkit-transform-origin:100% 0;-webkit-transform:scale(0,0) rotate(360deg) translateY(100%)}
  100%{opacity:1;-webkit-transform-origin:0 0;-webkit-transform:scale(1,1) rotate(0deg) translateY(0)}
}
@keyframes twisterInUp{
  0%{opacity:0;transform-origin:100% 0;transform:scale(0,0) rotate(360deg) translateY(100%)}
  30%{transform-origin:100% 0;transform:scale(0,0) rotate(360deg) translateY(100%)}
  100%{opacity:1;transform-origin:0 0;transform:scale(1,1) rotate(0deg) translateY(0)}
}
.twisterInUp{-webkit-animation-name:twisterInUp;animation-name:twisterInUp}

本地效果为：app/html5_animation/twisterInUp.html

第二种方式：twisterInDown-动画

CSS代码为：

.pages .p3 img{ width: 100%;}
.item-01{ position: absolute; left: 50px; top: 10px; width: 300px;-webkit-animation: twisterInDown 3s ease 0s 1 both;}
.item-02{ position: absolute; left: 100px; top: 300px; width: 400px;-webkit-animation: twisterInDown 3s ease 0.5s 1 both;}
@-webkit-keyframes twisterInDown{
  0%{opacity:0;-webkit-transform-origin:0 100%;-webkit-transform:scale(0,0) rotate(360deg) translateY(-100%)}
  30%{-webkit-transform-origin:0 100%;-webkit-transform:scale(0,0) rotate(360deg) translateY(-100%)}
  100%{opacity:1;-webkit-transform-origin:100% 100%;-webkit-transform:scale(1,1) rotate(0deg) translateY(0%)}
}
@keyframes twisterInDown{
  0%{opacity:0;transform-origin:0 100%;transform:scale(0,0) rotate(360deg) translateY(-100%)}
  30%{transform-origin:0 100%;transform:scale(0,0) rotate(360deg) translateY(-100%)}
  100%{opacity:1;transform-origin:100% 100%;transform:scale(1,1) rotate(0deg) translateY(0%)}
}
.twisterInDown{-webkit-animation-name:twisterInDown;animation-name:twisterInDown}

本地效果为：app/html5_animation/twisterInDown.html