这个脚本为我正在构建的网站上的标题创建了一个旋转文本效果。我想逐渐增加它们旋转的速度，所以它开始很慢，逐渐加速，保持最高速度，比如7倍原始速度，然后慢慢回到开始的速度，并在循环中这样做。

的时间当前设置在“ 1200 ”区域中函数的末尾，因此我假设它需要来自一个变量，并将该行为存储在函数中。只是不知道下一步该去哪里。

setInterval(() => {
  const up = document.querySelector('.span-one[data-up]');
  const show = document.querySelector('.span-one[data-show]');
  const down = show.nextElementSibling || document.querySelector('.span-one:first- 
  child');

  up.removeAttribute('data-up');
  show.removeAttribute('data-show');
  show.setAttribute('data-up', '');
  down.setAttribute('data-show', '');

}, 1200);

顺晟科技：

这里有一段代码可以帮助你，但请记住，样式是应用在一个裸元素上的。在你的代码中，你也必须考虑上下文。

/* Here you defined the animation. You can play around more and adjust the speed as you want */
@keyframes example {
  /* Here are some options */
  /* uncomment the sections to experiment */
  /* 0%   { transform: rotate(0deg); }
  25%  { transform: rotate(90deg); }
  50%  { transform: rotate(120deg); }
  75%  { transform: rotate(180deg); }
  100% { transform: rotate(360deg); } */
  
/*   0%   { transform: rotate(0deg); }
  25%  { transform: rotate(80deg); }
  50%  { transform: rotate(180deg); }
  75%  { transform: rotate(290deg); }
  100% { transform: rotate(360deg); } */
  
  0%   { transform: rotate(0deg); }
  50%  { transform: rotate(100deg); }
  75%  { transform: rotate(300deg); }
  100% { transform: rotate(360deg); }
  
  /* You can google about the animations and how these percentages work, but actually its pretty simple */
}

.rotating {
  /* This is optional, but needed if your title is block level element, just play around and see the differnce */
  display: inline-block;
  
  /* this is mandatory */
  animation-name: example;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

<代码><；HTML（>；）<；身体>；<；H1类=“旋转”>；我亲爱的旋转标题<；/H1>；<；/正文>；<；/HTML>；

StackOverflow对粘贴到JSFiddle的链接过于严格，所以我在这里