逐渐提高 CSS 关键帧速度答案

【问题标题】：Increasing CSS Keyframe Speed Gradually逐渐提高 CSS 关键帧速度
【发布时间】：2021-09-22 18:05:17
【问题描述】：

我发现这个 HTML/CSS 会创建一个旋转的文本标题，这是我之前使用 JS 制作的，但遇到了问题。使用这个@keyframe 脚本，我将如何提高旋转速度？所以它开始真的很慢，然后逐渐加快，保持较快的速度一段时间，然后降低到较慢的速度？

CSS

*,
*:before,
*:after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins",sans-serif;
  font-size: 45px;
  font-weight: 500;
}

body {
  background-color: #0e6ffc;
  height: 100vh;
  display: grid;
  place-items: center;
}

.wrapper {
  box-sizing: content-box;
  background-color: #ffffff;
  height: 70px;
  padding: 50px 30px;
  display: flex;
  border-radius: 8px;
  box-shadow: 0 20px 25px rgba(0,0,0,0.2);
}

.words {
  overflow: hidden;
}

span{
  display: block;
  height: 100%;
  padding-left: 10px;
  color: #0e6ffc;
  animation: spin_words 5s infinite;
}

@keyframes spin_words {
  10% {
    transform: translateY(-112%);
  }
  25% {
    transform: translateY(-100%);
  }
  35% {
    transform: translateY(-212%);
  }
  50% {
    transform: translateY(-200%);
  }
  60% {
    transform: translateY(-312%);
  }
  75% {
    transform: translateY(-300%);
  }
  85% {
    transform: translateY(-412%);
  }
  100% {
    transform: translateY(-400%);
  }
}

【问题讨论】：

最好能包含您的 HTML 代码。

标签： css frontend css-animations web-frontend keyframe

【解决方案1】：

您需要为动画设置时间。看到这个：
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function

对于您的代码，它将是这样的：

/* I assumed the element you're animating has #box id. Of course you can use any other seelctor */
#box { 
    animation-timing-function: ease-in-out;
}

【讨论】：