您现在的位置:首页 >> 前端 >> 内容

css3动画之上下抖动

时间:2016/12/8 13:42:04 点击:

  核心提示:.common_animate:hover{ animation-duration:1s; /*动画时间*/ animation-fill-mode: both; /*播放后的状态*/animatio...
.common_animate:hover{ 
    animation-duration:1s; /*动画时间*/
   animation-fill-mode: both; /*播放后的状态*/
    animation-name: buzz-out;
    animation-iteration-count: infinite; /*动作循环的次数:infinite 无限循环*/
    transform-origin: center bottom; /*设置动画旋转元素的基点为:居中靠下*/
    cursor: pointer;
}

@-webkit-keyframes buzz-out {
  0%,
  100%,
  20%,
  50%,
  80% {
  transition-timing-function: cubic-bezier(0.215,0.61,0.355,1); /*贝塞尔曲线 : X1 Y1 X2 Y2*/
  transform: translate3d(0,0,0); /*设置只在Z轴上移动*/
  }
  40%,
  43%{
  transition-timing-function: cubic-bezier(0.755,0.50,0.855,0.060);
  transform: translate3d(0,-30px,0);
  }
  70%{
  transition-timing-function: cubic-bezier(0.755,0.050,0.855,0.060);
  transform: translate3d(0,-15px,0);
  }
  90%{
  transform: translate3d(0,-4px,0);
  }
}

Tags:CS SS S3 3动 
作者:网络 来源:heartAndth