css - 在 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 动画资源:

在这里查看翻转动画:https://daneden.github.io/animate.css/

GitHub 上的来源:https://github.com/daneden/animate.css/tree/master/source/flippers