H5 按钮抖动效果

    
/*自定义一个透明度从0到1的动画，它的名称是fade-in*/
@keyframes fade-in{  
    0%{ opacity: 0;}
    100%{opacity:1;}
}
@-webkit-keyframes fade-in{
    0%{ opacity: 0;}
    100%{opacity:1;}
}
@-ms-keyframes fade-in{
    0%{ opacity: 0;}
    100%{opacity:1;}
}
@-o-keyframes fade-in{
    0%{ opacity: 0;}
    100%{opacity:1;}
}
@-moz-keyframes fade-in{
    0%{ opacity: 0;}
    100%{opacity:1;}
}
.first-words{ 
    opacity: 0;      /*实先规定文字的状态是不显示的*/
    animation: fade-in 4s ease 0s 1;    /*调用名称为fade-in的动画，全程动画显示时间4S，进入方式为ease，延时0S进入，播放次数1次*/
    -webkit-animation: fade-in 4s ease 0s 1;
    -moz-animation: fade-in 4s ease 0s 1;
    -o-animation: fade-in 4s ease 0s 1;
    -ms-animation: fade-in 4s ease 0s 1;
    
    /*规定动画的最后状态为结束状态*/
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode: forwards;  
      -o-animation-fill-mode: forwards; 
      -ms-animation-fill-mode: forwards;   
      -moz-animation-fill-mode: forwards; 
}
.second-words{ 
    opacity: 0;    
    animation: fade-in 4s ease 2s 1;
    -webkit-animation: fade-in 4s ease 2s 1;
    -moz-animation: fade-in 4s ease 2s 1;
    -o-animation: fade-in 4s ease 2s 1;
    -ms-animation: fade-in 4s ease 2s 1;
    
    /*规定动画的最后状态为结束状态*/
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode: forwards;  
      -o-animation-fill-mode: forwards; 
      -ms-animation-fill-mode: forwards;   
      -moz-animation-fill-mode: forwards; 
}
.third-words{ 
    opacity: 0;    
    animation: fade-in 4s ease 4s 1;
    -webkit-animation: fade-in 4s ease 4s 1;
    -moz-animation: fade-in 4s ease 4s 1;
    -o-animation: fade-in 4s ease 4s 1;
    -ms-animation: fade-in 4s ease 4s 1;
    
    /*规定动画的最后状态为结束状态*/
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode: forwards;  
      -o-animation-fill-mode: forwards; 
      -ms-animation-fill-mode: forwards;   
      -moz-animation-fill-mode: forwards; 
}

/** icon抖动*/
@-webkit-keyframes buzz-out {
          0% {
            -webkit-transform: translateY(0.03rem) rotate(2deg);
          }
          
           20% {
            -webkit-transform: translateY(0.05rem) rotate(2deg);
          }
         
           40% {
            -webkit-transform: translateY(0.05rem) rotate(2deg);
          }
         
          60% {
            -webkit-transform: translateY(0.05rem) rotate(2deg);
          }
         
          80% {
            -webkit-transform: translateY(0.05rem) rotate(2deg);
          }
          
          100% {
            -webkit-transform: translateY(0.05remx) rotate(-2deg);
          }
}
#next{ /* 获得抖动对象 */
            -webkit-animation-name: buzz-out;
            -webkit-animation-duration: 0.75s;  /* 抖动速度 */
            -webkit-animation-timing-function: linear;
            -webkit-animation-iteration-count: 100; /* 抖动次数 */
}