bounceOut、bounceOutDown、bounceOutUp、bounceOutLeft、bounceOutRight---动画

第一种方式：bounceOut动画

CSS代码为：

.pages .p3 img{ width: 100%;}
.item-01{ position: absolute; left: 20px; top: 10px; width: 300px;-webkit-animation: bounceOut 2s ease 0s 1 both;}
.item-02{ position: absolute; left: 250px; top: 300px; width: 300px;-webkit-animation: bounceOut 2s ease 1s 1 both;}
@-webkit-keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}
50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}
100%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}
}
@keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}
50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}
100%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}
}
.bounceOut{-webkit-animation-name:bounceOut;animation-name:bounceOut}

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

 

第二种方式：bounceOutDown-bounceOutUp动画

CSS代码为：

.pages .p3 img{ width: 100%;}
.item-01{ position: absolute; left: 50px; top: 50px; width: 300px;-webkit-animation: bounceOutDown 2s ease 1s 1 both;}
.item-02{ position: absolute; left: 10px; top: 300px; width: 600px;-webkit-animation: bounceOutUp 2s ease 0s 1 both;}
.item-03{ position: absolute; left: 150px; top: 380px; width: 350px;-webkit-animation: bounceOutUp 2s ease 0.5s 1 both;}
@-webkit-keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}
40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}
100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}
}
@keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}
40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}
100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}
}
.bounceOutDown{-webkit-animation-name:bounceOutDown;animation-name:bounceOutDown}
@-webkit-keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}
40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}
100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}
}
@keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}
40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}
100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}
}
.bounceOutUp{-webkit-animation-name:bounceOutUp;animation-name:bounceOutUp}

本地效果为：app/html5_animation/bounceOutDown-bounceOutUp.html

 

第三种方式：bounceOutLeft-bounceOutRight动画

CSS代码为：

.pages .p3 img{ width: 100%;}
.item-01{ position: absolute; left: -1372px;; top: 50px; width: 1615px; height: 106px;-webkit-animation: bounceOutLeft 2s ease 0s 1 both;}
.item-02{ position: absolute; left: 10px; top: 300px; width: 600px;-webkit-animation: bounceOutRight 2s ease 0s 1 both;}
.item-03{ position: absolute; left: 150px; top: 380px; width: 350px;-webkit-animation: bounceOutRight 2s ease 1s 1 both;}
@-webkit-keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}
100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}
}
@keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}
100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}
}
.bounceOutLeft{-webkit-animation-name:bounceOutLeft;animation-name:bounceOutLeft}
@-webkit-keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}
100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}
}
@keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}
100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}
}
.bounceOutRight{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight}

本地效果为：app/html5_animation/bounceOutLeft-bounceOutRight.html