css - 如何使用CSS指示“动画脉冲”功能的大小？

.element {
  animation: pulse 5s infinite;
}

这会使该元素具有动画效果，几乎是原始尺寸的两倍。我如何使脉搏变小？

最佳答案

我认为您需要比您想象的更多的东西来使它工作。

.element {
  animation: pulse 5s infinite;
}

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

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

请注意，“ 0％”和“ 100％”是相同的值吗？这样循环就可以了，如果将其设置为无限，则将很平滑。

关于css - 如何使用CSS指示“动画脉冲”功能的大小？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31789537/