每次点击添加css动画,div点击添加css动画

div点击添加css动画

}#big_div{width:100%;height:100%;background-color:#00FF00;

}.small_div{width:100%;height:30px;background-color:#0000FF;border-bottom:1px solid;border-color:#aa2F2F;

}

/*x轴平移-20%*/.animotion{-webkit-transform:translateX(-20%);-webkit-transition-property:all;-webkit-transition-duration:1s;-webkit-transition-delay:0;-webkit-transition-timing-function:ease;

}

/*x轴平移会原位置*/.ooanimotion{-webkit-transform:translateX(0px);-webkit-transition-property:all;-webkit-transition-duration:0.3s;-webkit-transition-delay:0;-webkit-transition-timing-function:ease;

}

/*旋转180度*/.roanimotion{-webkit-transform:rotate(180deg);-webkit-transition-property:all;-webkit-transition-duration:1s;-webkit-transition-delay:0;-webkit-transition-timing-function:ease;

}

/*旋转回原角度*/.ooroanimotion{-webkit-transform:rotate(0deg);-webkit-transition-property:all;-webkit-transition-duration:0.3s;-webkit-transition-delay:0;-webkit-transition-timing-function:ease;

}

/*box盒子布局*/.ub{display:-webkit-box;display:-moz-box;position:relative;

}

/*垂直居中*/.ub-ac{-webkit-box-align:center;-moz-box-align:center;box-align:center;

}

/*水平居中*/.ub-pc{-webkit-box-pack:center;-moz-box-pack:center;box-pack:center;

}.ub-rev{-webkit-box-direction:reverse;box-direction:reverse;

}.ub-ver{-webkit-box-orient:vertical;box-orient:vertical;

}.ub-f1{position:relative;-webkit-box-flex:1;box-flex:1;

}

111