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

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);
  }
}

标签： csscss-animations

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>