Создайте эффект качания/встряски в 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-Анимации здесь: https://daneden.github.io/animate.css/

Источник на GitHub: https://github.com/daneden/animate.css/tree/master/source/flippers