slideDow、slideUp--动画

第一种方式：slideDown-slideUp动画

CSS代码为：

.pages .p3 img{ width: 100%;}
.item-01{ position: absolute; left: 20px; top: 10px; width: 300px;-webkit-animation: slideDown 2s ease 1s 1 both;}
.item-02{ position: absolute; left: 250px; top: 300px; width: 300px;-webkit-animation: slideUp 2s ease 1.5s 1 both;}
@-webkit-keyframes slideUp{0%{-webkit-transform-origin:0 0;-webkit-transform:translateY(0%)}
100%{-webkit-transform-origin:0 0;-webkit-transform:translateY(-100%)}
}
@keyframes slideUp{0%{transform-origin:0 0;transform:translateY(0%)}
100%{transform-origin:0 0;transform:translateY(-100%)}
}
.slideUp{-webkit-animation-name:slideUp;animation-name:slideUp}
@-webkit-keyframes slideDown{0%{-webkit-transform-origin:0 0;-webkit-transform:translateY(0%)}
100%{-webkit-transform-origin:0 0;-webkit-transform:translateY(100%)}
}
@keyframes slideDown{0%{transform-origin:0 0;transform:translateY(0%)}
100%{transform-origin:0 0;transform:translateY(100%)}
}
.slideDown{-webkit-animation-name:slideDown;animation-name:slideDown}

本地效果为：app/html5_animation/slideDown-slideUp.html