在 CSS3 中使用过渡为旋转设置动画关键帧答案

【问题标题】：Animating keyframes with transition for rotation in CSS3在 CSS3 中使用过渡为旋转设置动画关键帧
【发布时间】：2016-09-19 11:24:27
【问题描述】：

我正在尝试一个使用步骤的连续旋转动画（无限）的简单示例，但我似乎无法在状态之间进行平滑过渡。所以我正在尝试将文本框的旋转（无限）从 0 度设置为 360 度，在每一步之间暂停：demo jsfiddle。但是跳跃是瞬间的，我不能让它们从一个平滑过渡到另一个。我怎样才能做到这一点，只使用 CSS？

到目前为止我的代码是：

<input type="text" id="textbox" class='textbox animate' value="Text box"/> 


body, html {
  width: 100%;
  height: 100%;
  background: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction:column;
}
input {
  margin-top: 70px;
  clear: both;
}

.textbox {
   width: auto;
   display:block;
   text-align: center;
}

.textbox.animate {
   animation:spin 30s steps(30, end) infinite;
   transition: rotate 0.3s ease;
}
@keyframes spin { 
   100% { transform: rotate(360deg); } 
}

【问题讨论】：

据我所知，steps() 无法做到这一点。 steps() 就是这样设计的——从一种状态跳转到另一种状态。您可能需要手动编写关键帧。
好的，我会尝试这样做，但我还没有找到如何在每个关键帧之间进行延迟/暂停。你能提供一些信息吗？

标签： css css-animations

【解决方案1】：

正如哈利所说，您必须在此处添加关键帧动画，

查看您更新的fiddle here

你的 CSS 会是这样的

.textbox.animate {
   -webkit-animation: circle infinite .75s linear;
      -moz-animation: circle infinite .75s linear;
        -o-animation: circle infinite .75s linear;
           animation: circle infinite .75s linear;
    transition: rotate 0.3s ease;}

@-webkit-keyframes circle
{
    0%
        {
            -webkit-transform: rotate(0);
                -ms-transform: rotate(0);
                 -o-transform: rotate(0);
                    transform: rotate(0);}
   100%
       {
            -webkit-transform: rotate(360deg);
                -ms-transform: rotate(360deg);
                 -o-transform: rotate(360deg);
                    transform: rotate(360deg);}}
@-moz-keyframes circle
{
    0%
       {
            -webkit-transform: rotate(0);
                -ms-transform: rotate(0);
                 -o-transform: rotate(0);
                    transform: rotate(0);}
    100%
        {
            -webkit-transform: rotate(360deg);
                -ms-transform: rotate(360deg);
                 -o-transform: rotate(360deg);
                    transform: rotate(360deg);}}
@-o-keyframes circle
{
    0%
       {
            -webkit-transform: rotate(0);
                -ms-transform: rotate(0);
                 -o-transform: rotate(0);
                    transform: rotate(0);}
    100%
       {
            -webkit-transform: rotate(360deg);
                -ms-transform: rotate(360deg);
                 -o-transform: rotate(360deg);
                    transform: rotate(360deg);}}
@keyframes circle
{
    0%
        {
            -webkit-transform: rotate(0);
                -ms-transform: rotate(0);
                 -o-transform: rotate(0);
                    transform: rotate(0);}
    100%
       {
            -webkit-transform: rotate(360deg);
                -ms-transform: rotate(360deg);
                 -o-transform: rotate(360deg);
                    transform: rotate(360deg);}}

【讨论】：

【解决方案2】：

据我所知，您尝试达到的效果不是steps() function 可以达到的效果，因为 step 功能就像一个楼梯，在动画的每一步之间都有一个急剧的跳跃。

您需要手动编写关键帧，以便在步骤的起点和终点之间平稳移动，然后暂停直到下一步开始。下面的 sn-p 就是这样做的：

在 0% 时，旋转指定为 0 度，在动画持续时间的 1.66% 时，旋转指定为 12 度（1/30 度）。这意味着从 0 度到 12 度的平滑旋转。
对于 1.66% 和 3.33%，旋转指定为 12 度。所以这两种状态之间没有轮换（停顿）。
然后在 4.99% 时，旋转指定为 24 度。所以在 3.33% 和 4.99% 之间，元素从 12 度逐渐旋转到 24 度。然后直到 6.65%，它保持在相同的位置，依此类推。

我已根据编号选择关键帧选择器（百分比值）。的步骤。总共必须有 30 个步骤，因此每个步骤（旋转 + 暂停）应超过 3.33% 跨度。然后我给旋转和暂停的时间相等，所以旋转完成时为 1.66%，暂停完成时为 3.33%。

如果说您需要 40 步，则旋转增量应为 9 度，并且每步应超过动画持续时间的 2.5%。所以旋转在 1.25% 结束，暂停在 2.5% 结束（然后下一步的旋转在 3.75% 结束，暂停在 5% 结束，依此类推）。

body,
html {
  width: 100%;
  height: 100%;
  background: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
input {
  margin-top: 70px;
  clear: both;
}
.textbox {
  width: auto;
  display: block;
  text-align: center;
}
.textbox.animate {
  animation: spin 30s linear infinite;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  1.66%,
  3.33% {
    transform: rotate(12deg);
  }
  4.99%,
  6.66% {
    transform: rotate(24deg);
  }
  8.32%,
  9.99% {
    transform: rotate(36deg);
  }
  11.65%,
  13.32% {
    transform: rotate(48deg);
  }
  14.98%,
  16.65% {
    transform: rotate(60deg);
  }
  18.31%,
  19.98% {
    transform: rotate(72deg);
  }
  21.65%,
  23.31% {
    transform: rotate(84deg);
  }
  24.98%,
  26.65% {
    transform: rotate(96deg);
  }
  28.31%,
  29.98% {
    transform: rotate(108deg);
  }
  31.65%,
  33.33% {
    transform: rotate(120deg);
  }
  34.98%,
  36.65% {
    transform: rotate(132deg);
  }
  38.33%,
  39.98% {
    transform: rotate(144deg);
  }
  41.65%,
  43.33% {
    transform: rotate(156deg);
  }
  44.98%,
  46.65% {
    transform: rotate(168deg);
  }
  48.33%,
  50% {
    transform: rotate(180deg);
  }
  51.65%,
  53.33% {
    transform: rotate(192deg);
  }
  54.99%,
  56.65% {
    transform: rotate(204deg);
  }
  58.33%,
  59.99% {
    transform: rotate(216deg);
  }
  61.65%,
  63.33% {
    transform: rotate(228deg);
  }
  64.99%,
  66.66% {
    transform: rotate(240deg);
  }
  68.33%,
  69.99% {
    transform: rotate(252deg);
  }
  71.66%, 73.33% {
    transform: rotate(264deg);
  }
  74.99%,
  76.66% {
    transform: rotate(276deg);
  }
  78.33%,
  79.99% {
    transform: rotate(288deg);
  }
  81.66%,
  83.33% {
    transform: rotate(300deg);
  }
  84.99%,
  86.66% {
    transform: rotate(312deg);
  }
  88.33%,
  89.99% {
    transform: rotate(324deg);
  }
  91.66%,
  93.33% {
    transform: rotate(336deg);
  }
  94.99%,
  96.66% {
    transform: rotate(348deg);
  }
  98.33%,
  100% {
    transform: rotate(360deg);
  }
}

<script>
  function startAnimation() {

    document.getElementById("textbox").className = "textbox animate";
  }
</script>

<input type="text" id="textbox" class='textbox animate' value="Text box" />

【讨论】：

不错的答案，一如既往！
谢谢@vals :)