bounceIn、bounceInDown、bounceInUp、bounceInLeft、bounceInRight---动画

第一种方式：bounceIn-动画

CSS代码为：

.pages .p3 img{ width: 100%;}
.item-01{ position: absolute; left: 20px; top: 10px; width: 300px;-webkit-animation: bounceIn 2s ease 0s 1 both;}
.item-02{ position: absolute; left: 250px; top: 300px; width: 300px;-webkit-animation: bounceIn 2s ease 1s 1 both;}
@-webkit-keyframes bounceIn{
  0%,20%,40%,60%,80%,100%{-webkit-transition-timing-function:cubic-bezier(0.215,.610,.355,1.000);transition-timing-function:cubic-bezier(0.215,.610,.355,1.000)}
  0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}
  20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}
  40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}
  60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}
  80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}
  100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
}
@keyframes bounceIn{
  0%,20%,40%,60%,80%,100%{-webkit-transition-timing-function:cubic-bezier(0.215,.610,.355,1.000);transition-timing-function:cubic-bezier(0.215,.610,.355,1.000)}
  0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}
  20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}
  40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}
  60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}
  80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}
  100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
}
.bounceIn{-webkit-animation-name:bounceIn;animation-name:bounceIn}

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

第二种方式：bounceInDown-bounceInUp动画

CSS代码为：

.pages .p3 img{ width: 100%;}
.item-01{ position: absolute; left: 50px; top: 50px; width: 300px;-webkit-animation: bounceInDown 2s ease 1s 1 both;}
.item-02{ position: absolute; left: 10px; top: 300px; width: 600px;-webkit-animation: bounceInUp 2s ease 0s 1 both;}
.item-03{ position: absolute; left: 150px; top: 380px; width: 350px;-webkit-animation: bounceInUp 2s ease 0.5s 1 both;}
@-webkit-keyframes bounceInDown{
  0%,60%,75%,90%,100%{-webkit-transition-timing-function:cubic-bezier(0.215,.610,.355,1.000);transition-timing-function:cubic-bezier(0.215,.610,.355,1.000)}
  0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}
  60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}
  75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}
  90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}
  100%{-webkit-transform:none;transform:none}
}
@keyframes bounceInDown{
  0%,60%,75%,90%,100%{-webkit-transition-timing-function:cubic-bezier(0.215,.610,.355,1.000);transition-timing-function:cubic-bezier(0.215,.610,.355,1.000)}
  0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}
  60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}
  75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}
  90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}
  100%{-webkit-transform:none;transform:none}
}
.bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown}
@-webkit-keyframes bounceInUp{
  0%,60%,75%,90%,100%{-webkit-transition-timing-function:cubic-bezier(0.215,.610,.355,1.000);transition-timing-function:cubic-bezier(0.215,.610,.355,1.000)}
  0%{opacity:0;-webkit-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}
  60%{opacity:1;-webkit-transform:translate3d(0,-25px,0);transform:translate3d(0,-25px,0)}
  75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}
  90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}
  100%{-webkit-transform:none;transform:none}
}
@keyframes bounceInUp{
  0%,60%,75%,90%,100%{-webkit-transition-timing-function:cubic-bezier(0.215,.610,.355,1.000);transition-timing-function:cubic-bezier(0.215,.610,.355,1.000)}
  0%{opacity:0;-webkit-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}
  60%{opacity:1;-webkit-transform:translate3d(0,-25px,0);transform:translate3d(0,-25px,0)}
  75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}
  90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}
  100%{-webkit-transform:none;transform:none}
}
.bounceInUp{-webkit-animation-name:bounceInUp;animation-name:bounceInUp}

本地效果为：app/html5_animation/bounceInDown-bounceInUp.html

 

第三种方式：bounceInLeft-bounceInRight动画

CSS代码为：

.pages .p3 img{ width: 100%;}
.item-01{ position: absolute; left: -1372px;; top: 50px; width: 1615px; height: 106px;-webkit-animation: bounceInLeft 2s ease 0s 1 both;}
.item-02{ position: absolute; left: 10px; top: 300px; width: 600px;-webkit-animation: bounceInRight 2s ease 0s 1 both;}
.item-03{ position: absolute; left: 150px; top: 380px; width: 350px;-webkit-animation: bounceInRight 2s ease 1s 1 both;}
@-webkit-keyframes bounceInLeft{
  0%,60%,75%,90%,100%{-webkit-transition-timing-function:cubic-bezier(0.215,.610,.355,1.000);transition-timing-function:cubic-bezier(0.215,.610,.355,1.000)}
  0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}
  60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}
  75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}
  90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}
  100%{-webkit-transform:none;transform:none}
}
@keyframes bounceInLeft{
  0%,60%,75%,90%,100%{-webkit-transition-timing-function:cubic-bezier(0.215,.610,.355,1.000);transition-timing-function:cubic-bezier(0.215,.610,.355,1.000)}
  0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}
  60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}
  75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}
  90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}
  100%{-webkit-transform:none;transform:none}
}
.bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft}
@-webkit-keyframes bounceInRight{
  0%,60%,75%,90%,100%{-webkit-transition-timing-function:cubic-bezier(0.215,.610,.355,1.000);transition-timing-function:cubic-bezier(0.215,.610,.355,1.000)}
  0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}
  60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}
  75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}
  90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}
  100%{-webkit-transform:none;transform:none}
}
@keyframes bounceInRight{
  0%,60%,75%,90%,100%{-webkit-transition-timing-function:cubic-bezier(0.215,.610,.355,1.000);transition-timing-function:cubic-bezier(0.215,.610,.355,1.000)}
  0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}
  60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}
  75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}
  90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}
  100%{-webkit-transform:none;-ms-transform:none;transform:none}
}
.bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}

本地效果为：app/html5_animation/bounceInLeft-bounceInRight.html