Question

我正在尝试使用步骤进行连续旋转动画（无限）的简单示例，但我似乎无法在状态之间进行平滑过渡。所以我正在尝试的是将文本框的旋转（无限）从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); } 
}

Answer 1

据我所知，你试图实现的效果不是steps() function可以达到的效果，因为步骤功能就像一个阶梯，在动画的每一步之间有一个急剧的跳跃

您需要手动编写关键帧，以便在步骤的起点和终点之间有一个平滑的移动，然后暂停，直到下一步开始。以下代码片段执行此操作，具体如下：

在0％时，旋转被指定为0度并且在动画持续时间的1.66％处，旋转被指定为12度（1/30）。这意味着从0deg到12deg的平滑旋转。
对于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％，依此类推）。

＆＃13;

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);
  }
}

＆＃13;

<script>
  function startAnimation() {

    document.getElementById("textbox").className = "textbox animate";
  }
</script>

<input type="text" id="textbox" class='textbox animate' value="Text box" />

＆＃13;

Answer 2

正如Harry所说，你必须在这里添加关键帧动画，

结帐更新后的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);}}

动画关键帧在CSS3中具有转换以进行旋转

2 个答案: