如何使用css决定“动画脉冲”功能的大小？

Question

.element {
  animation: pulse 5s infinite;
}

这会使元素的动画几乎是原始大小的两倍。如何使脉冲变小？

Answer 1

我认为你需要更多工作才能实现这个目标。

.element {
  animation: pulse 5s infinite;
}

＆＃39;脉冲＆＃39;是动画的名称，而不是css命令。所以＆＃39;脉冲＆＃39;在这种情况下需要设置参数。这是通过规定关键帧来完成的。例如，如果你是“脉动”的话。文本...

@keyframes pulse {
  0%{
    font-size: 10px;
  }
  50% {
    font-size: 12px;
  }
  100% {
    font-size: 10px;
  }
}

请注意，＆＃39; 0％＆＃39;并且＆＃39; 100％＆＃39;是相同的价值？这是如此循环，所以如果你让它变得无限，它将是平滑的。