CSS3 DIV从左 从右 出现bounceInLeft bounceInRight 动画

首先加入STYLE
<style>
 
.item-01{ position: absolute;background: #ddd; left: 0px;; top: 50px; width: 260px; height: 106px;-webkit-animation: bounceInLeft 2s ease 0s 1 both;}
.item-02{ position: absolute;background: #ddd; left: 10px; top: 300px; width: 600px;-webkit-animation: bounceInRight 2s ease 0s 1 both;}
.item-03{ position: absolute;background: #ddd; 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}
</style>

然后是DIV
<p class="item-01">123</p>
<p class="item-02">123</p>
<p class="item-03">123</p>