如何使用少摇动的animate.css动摇

Question

我使用animate.css来获得CSS3摇动效果，CSS看起来像下面的代码片段。现在它多次来回晃动，我想把握减半。有没有办法做到这一点与动画css3或我需要修改下面的css3？如果是这样，最好的方法是什么？

感谢

@-webkit-keyframes shake { 
    0%, 100% { 
    -webkit-transform: translate3d(0, 0, 0); 
      transform: translate3d(0, 0, 0); 
    } 

    10%, 30%, 50%, 70%, 90% { 
    -webkit-transform: translate3d(-10px, 0, 0); 
      transform: translate3d(-10px, 0, 0); 
    } 

    20%, 40%, 60%, 80% { 
    -webkit-transform: translate3d(10px, 0, 0); 
      transform: translate3d(10px, 0, 0); 
    } 
} 

@keyframes shake { 
    0%, 100% { 
    -webkit-transform: translate3d(0, 0, 0); 
      transform: translate3d(0, 0, 0); 
    } 

    10%, 30%, 50%, 70%, 90% { 
    -webkit-transform: translate3d(-10px, 0, 0); 
      transform: translate3d(-10px, 0, 0); 
    } 

    20%, 40%, 60%, 80% { 
    -webkit-transform: translate3d(10px, 0, 0); 
      transform: translate3d(10px, 0, 0); 
    } 
} 

.shake { 
    -webkit-animation-name: shake; 
    animation-name: shake; 
} 

Answer 1

不能确定要如何“砍摇了一半”。你的意思是速度，摇摆？

这里是我来了，demo

如果你想慢下来，动画，改变`-webkit-动画时间：

这里是一个定制的酷抖动/摆动效果：

@keyframes shake { 
0% { 
    -webkit-transform:translate(2px,1px) rotate(0deg) 
} 

10% { 
    -webkit-transform:translate(-1px,-2px) rotate(-1deg) 
} 

20% { 
    -webkit-transform:translate(-3px,0px) rotate(1deg) 
} 

30% { 
    -webkit-transform:translate(0px,2px) rotate(0deg) 
} 

40% { 
    -webkit-transform:translate(1px,-1px) rotate(1deg) 
} 

50% { 
    -webkit-transform:translate(-1px,2px) rotate(-1deg) 
} 

60% { 
    -webkit-transform:translate(-3px,1px) rotate(0deg) 
} 

70% { 
    -webkit-transform:translate(2px,1px) rotate(-1deg) 
} 

80% { 
    -webkit-transform:translate(-1px,-1px) rotate(1deg) 
} 

90% { 
    -webkit-transform:translate(2px,2px) rotate(0deg) 
} 

100% { 
    -webkit-transform:translate(1px,-2px) rotate(-1deg) 
} 
} 

下面是一个简单demo