如何给固定位置的摆动动画效果？

Question

我希望元素像swaying plant那样具有动画效果。我希望以以下方式为div设置动画。

• 修复底部
• 来回移动头

正在寻找完整的CSS解决方案。

我已经尝试过了

@keyframes wiggle {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-1deg);
  }
  50% {
    transform: rotate(2deg);
  }
  75% {
    transform: rotate(-0.4deg);
  }
  100% {
    transform: rotate(1deg);
  }
}

Answer 1

您可以将transform-origin属性设置为bottom。

.el {
  margin: 30px 50px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 150px 50px 0 50px;
  border-color: #007bff transparent transparent transparent;
  animation: wiggle infinite 3s alternate;
  transform-origin: bottom;
}

@keyframes wiggle {
  0% {transform: rotate(0deg);}
  25% {transform: rotate(-3deg);}
  50% {transform: rotate(5deg);}
  75% {transform: rotate(-1deg);}
  100% {transform: rotate(2deg);}
}

<div class="el"></div>