在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