蝴蝶扇动翅膀动画SVG

Question

我正在尝试为蝴蝶翅膀制作动画，它应该看起来像蝴蝶拍打翅膀。你能帮助我如何实现这一目标吗？ 这是我尝试过的 jsfiddle：https://jsfiddle.net/qfoy6hbc/

.butterfly {
  width: 150px;
  height: auto;
}

.left-wing {
  animation: left 1s linear infinite alternate;  
  transform-origin: right;
}

.right-wing {
  animation: right 1s linear infinite alternate;  
  transform-origin: left;
}

@keyframes left{
  to {transform:rotateY(20deg)}
}
@keyframes right{
  to {transform:rotateY(-20deg)}
}

Answer 1

您的问题没有正确答案，但这里有一些建议

首先你需要正确设置你的枢轴点，你有

transform-origin:left and right

，但是当翅膀的svg向左和向右扩展时，我建议放置一个

transform-origin:center

，或者在你的具体情况下沿着

transform-origin:40% 65%

的某个地方

然后放大翅膀的运动，你会发现它沿着 X 轴折叠得很好，但是你需要沿着另一个轴折叠一些，因为你的蝴蝶不是完全垂直的。

这里有两个解决方案：使用

rotateY

，或者从垂直 svg 开始，当看起来一切正常时，旋转整个

Layer 1