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-Animations：https://daneden.github.io/animate.css/

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

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

1 个答案: