jquery - 如何使我的动画过渡顺利？

Question

我正在尝试制作一个用两根绳子连接的面板的动画，钉子像钟摆一样从左向右摆动。这是动画代码和过渡函数。对于演示，您可以查看下面的代码片段:

.headline {
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
  margin-top: 150px;
}

.headline .box {
  position: relative;
  top: 10px;
  left: -70px;
}

.headline .box:after {
  content: "";
  width: 45px;
  height: 45px;
  background: black;
  position: absolute;
  border-radius: 50%;
  top: -85px;
  left: 105px;
  z-index: 10;
}

.headline .panel {
  background: white;
  color: #ff004f;
  font-size: 46px;
  font-family: "Quicksand", sans-serif;
  padding: 10px;
  font-weight: 700;
  max-width: 250px;
  display: block;
  line-height: 46px;
  position: relative;
}

.headline .panel:hover {
  animation-timing-function: cubic-bezier(0.120, 0.485, 0.950, 0.475);
  animation: pendulum 2s infinite;
}

.headline .panel:before {
  content: "";
  width: 155px;
  height: 10px;
  background: white;
  display: block;
  transform: translateX(8px) rotate(148deg);
  position: absolute;
  top: -40px;
  left: -16px;
  border-radius: 5px;
}

.headline .panel:after {
  content: "";
  width: 150px;
  height: 10px;
  background: white;
  display: block;
  transform: translateX(-10px) rotate(-148deg);
  position: absolute;
  top: -40px;
  right: -18px;
}

@keyframes pendulum {
  0%,
  50%,
  100% {
    transform: rotate(0deg);
    transform-origin: 50% -50%;
  }
  25% {
    transform: rotate(-25deg);
    transform-origin: 50% -50%;
  }
  75% {
    transform: rotate(25deg);
    transform-origin: 50% -50%;
  }
}

body {
  background-color: #EEE;
}

<div class="headline">
  <div class="box">
    <span class="panel">Test Panel</span>
  </div>
</div>

它以某种方式工作，但动画是机器人的，不是很流畅和自然。您能指出如何改进这个动画吗？

如果你需要使用 JS，我也可以使用 jQuery。

Answer 1

与@Kushtrim的答案类似，但我添加了一个负的animation-delay，以便摆锤从底部开始摆动，而不是突然跳到-25deg。使用这种技术可以在中途开始动画。以下是相关修改规则:

.headline .panel:hover {
      animation-timing-function: cubic-bezier(0.120, 0.485, 0.950, 0.475);
      animation: pendulum 2s infinite; 
      animation-delay: -1.3s /* I added this */
}

@keyframes pendulum {
  0% {
    transform: rotate(-25deg);
    transform-origin: 50% -50%; 
  }
  50% {
    transform: rotate(25deg);
    transform-origin: 50% -50%; 
  }
  100% {
    transform: rotate(-25deg);
    transform-origin: 50% -50%; 
  } 
}

还有一个 fiddle :https://jsfiddle.net/125wps7s/

动画延迟时间需要反复试验才能正确。我刚刚选择了一个看起来足够接近的值。