html - CSS3 动画钟摆效果

Question

我想用纯 CSS 实现钟摆效果，但不流畅。

这就是我想要的，但使用的是纯 CSS。 http://www.webdevdoor.com/demos/html5-pendulum-demo/

但我更喜欢根据位置的自然速度变化。

Fiddle

.bellImg {
  height: 20px;
  width: 20px;
  position: absolute;
  right: 10px;
  top: 18px;
  -webkit-animation-name: rotate;
  animation-delay: 3s;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: linear;
  -webkit-transform-origin: 50% 0%;
  -webkit-animation-timing-function: ease-in-out;
}
@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
  }
  10% {
    -webkit-transform: rotate(10deg);
  }
  20% {
    -webkit-transform: rotate(20deg);
  }
  30% {
    -webkit-transform: rotate(10deg);
  }
  40% {
    -webkit-transform: rotate(5deg);
  }
  50% {
    -webkit-transform: rotate(0deg);
  }
  60% {
    -webkit-transform: rotate(-5deg);
  }
  70% {
    -webkit-transform: rotate(-10deg);
  }
  80% {
    -webkit-transform: rotate(-20deg);
  }
  90% {
    -webkit-transform: rotate(-10deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
  }
}

<img class="bellImg" src="img/bell.png">

Answer 1

您的代码中存在一些问题:

• animation-timing-function 指定为 ease-in-out .这表明动画开始和结束的速度很慢，但中间速度更快。对于优雅和平等的举动，这应该设置为 linear .

  This is what MDN says about ease-in-out timing function:

  This keyword represents the timing function cubic-bezier(0.42, 0.0, 0.58, 1.0). With this timing function, the animation starts slowly, accelerates then slows down when approaching its final state. At the beginning, it behaves similarly to the ease-in function; at the end, it is similar to the ease-out function.

• 没有名为 linear 的值对于 animation-direction .
• 拆分不相等。也就是说，对于大约 10% 的间隙，它会旋转 10 度，而对于其他间隙，它只会旋转 5 度。使拆分相等。

下面的代码片段经过所有修正后生成了一个流畅的动画。

.bellImg {
  height: 20px;
  width: 20px;
  position: absolute;
  right: 10px;
  top: 18px;
  -webkit-animation-name: rotate;
  animation-delay: 3s;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: normal;
  -webkit-transform-origin: 50% 0%;
  -webkit-animation-timing-function: linear;  /* or make your custom easing */
}
@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(20deg);
  }
  75% {
    -webkit-transform: rotate(-20deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
  }
}

<img class="bellImg" src="https://cdn1.iconfinder.com/data/icons/freeline/32/bell_sound_notification_remind_reminder_ring_ringing_schedule-48.png">

---

。

要根据位置设置动画速度，一种选择是执行以下操作:

• 将图像添加到容器元素中。对其进行动画处理，使其从 20 度旋转到 -40 度。
• 使父项上的动画比子项早于两者动画持续时间的 1/3^rd 开始。也就是说，将 parent 的延迟减少 0.66s .这样做是为了让 parent 抵消 child 的初始旋转。差异是动画持续时间的 1/3^rd，因为这是父级达到 0deg 所花费的时间。
• 更改图像动画的关键帧，使旋转从 -20 度到 40 度。
• 设置animation-direction作为alternate对于两者，以便它们在第一次迭代时向前移动，在下一次迭代时向后移动，依此类推。
• 设置animation-timing-function作为ease-in-out以便它在接近极端时减速。当动画持续时间增加时效果更明显。

.container {
  position: absolute;
  height: 20px;
  width: 20px;
  /* right: 10px; commented for demo */
  top: 18px;
  transform: rotate(20deg);
  animation-name: rotate-container;
  animation-delay: 2.33s;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  transform-origin: 50% 0%;
  animation-timing-function: ease-in-out;
}
.bellImg {
  height: 100%;
  width: 100%;  
  transform: rotate(-20deg);
  animation-name: rotate;
  animation-delay: 3s;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  transform-origin: 50% 0%;
  animation-timing-function: ease-in-out;
}
@keyframes rotate {
  0% {
    transform: rotate(-20deg);
  }
  100% {
    transform: rotate(40deg);
  }
}
@keyframes rotate-container {
  0% {
    transform: rotate(20deg);
  }
  100% {
    transform: rotate(-40deg);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='container'>
  <img class="bellImg" src="https://cdn1.iconfinder.com/data/icons/freeline/32/bell_sound_notification_remind_reminder_ring_ringing_schedule-48.png">
</div>

^{在代码片段中使用无前缀库只是为了避免浏览器前缀。}