@-webkit-keyframes bounceInRight {
0%, 100%, 60%, 75%, 90% {
-webkit-animation-timing-function: cubic-bezier(0.215, .61, .355, 1);
animation-timing-function: cubic-bezier(0.215, .61, .355, 1)
}
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
}
}
.animatedtemo {
-webkit-animation-name:bounceInRight;
-webkit-animation-duration: 2s;
animation-duration:2s;
-webkit-animation-fill-mode: backwards;
animation-fill-mode: backwards
}
這個單獨那出來做一個樣式類別
jquery只用為這個元素加入這個類別就可以執行動畫了