在css中创建摇摆/摇动效果

Question

我正在尝试创建此animation中显示的相同来回“摇摆”效果。有人可以告诉我如何尽可能在CSS中做到这一点？我尝试使用变换透视和旋转（请参阅下面的代码）。但它不那么流畅。

CSS：

img.flipIn { 
    -webkit-animation:flip 1s ease-in-out infinite; 
    -moz-animation:flip 1s ease-in-out infinite; 
    animation:flip 1s ease-in-out infinite; 
} 

@-webkit-keyframes flip { 
    0% { -webkit-transform: perspective(400px) rotateX(0deg);} 
    50% { -webkit-transform: perspective(400px) rotateX(180deg);} 
    100% { -webkit-transform: perspective(400px) rotateX(00deg);} 
} 

@keyframes flip { 
    0% { -webkit-transform: perspective(400px) rotateX(0deg);} 
    20% { -webkit-transform: perspective(400px) rotateX(20deg);} 
    40% { -webkit-transform: perspective(400px) rotateX(-20deg);} 
    100% { -webkit-transform: perspective(400px) rotateX(0deg);} 
} 

Answer 1

Animate.css是CSS动画一个很好的资源：

退房这里flipIn的动画：在GitHub上https://daneden.github.io/animate.css/

来源：https://github.com/daneden/animate.css/tree/master/source/flippers