Html 眨眼和旋转

我试图实现一个无限的眨眼和旋转，但我面临的问题是相当奇怪的，眨眼应该以500毫秒的固定间隔发生，很好地发生了一段时间，然后消失，再次出现

此外，我还通过了很多关于眨眼的问题，但我的测试用例是不同的。我无法在关键帧中保持0%50%100%以使闪烁正常工作，因为我希望跨度以我指定的特定百分比闪烁

例如：我希望范围在100度或90度闪烁，因此我应该能够通过指定精确的百分比值来指定闪烁时间

这是我迄今为止的工作，任何帮助都将不胜感激。包括供应商前缀

<div>
  <span></span>
 </div>

<style>
div{
    position: fixed;
    width:3px;
    height:100px;
    left: 300px;
    top: 100px;
    border: 1px rgba(255,255,255,0.1) solid;
    -webkit-animation: spin 500ms steps(30) infinite; 
    -webkit-transform-origin: center center; 
    -webkit-transform: translate3d(0, 0, 0);
}

span{
    display:block;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    -webkit-animation: blink 500ms infinite steps(1); 
}

@-webkit-keyframes spin {
    from{
        -webkit-transform: rotate(0deg)
    }
    to{
        -webkit-transform: rotate(360deg)
    } 
}

@-webkit-keyframes blink {
    // I should be able to any percentage value to get the span blink at a particular degree.
   // for now I am trying to blink the span at 0%, the beginning, later I might change it to 50% or something
    0% {background: #fff}
    1% {background: none;}
} 

body{
    background: #232323;
}
</style>

试试这个：

---

可能是浏览器跳过了那个帧吗？我考虑到了这一点，这就是为什么如果你看一下DIV的动画计时，我用了500毫秒30步，也就是60帧。我在chrome flags旁边运行了FPS仪表，代码是最小的，它也一直以60fps的速度运行，所以500ms和步骤30是正确的。另外，如果跳帧是一种情况，那么，如果你看了小提琴，眨眼可以正常工作10或11次，然后在相同的持续时间内消失，并返回到10-11次眨眼。如果你将眨眼更改为0%和20%，你可以看到眨眼始终有效，但有时会漏掉标记，从12点位置开始…不要忘记你的moz前缀。我在FF中根本看不到它，直到我准确地添加了它。我正试图弄明白为什么会发生这种情况。因为如果你禁用旋转，只是让眨眼发生，这个小故障仍然会显示出来。我不知道改变缓和效果如何解决这个问题。此外，这个问题仍然存在。

  .i{
    position: fixed;
    width:10px;
    height:150px;
    left: 300px;
    top: 100px;
    border: 1px rgba(255,255,255,0.1) solid;
    -webkit-animation: spin 500ms steps(30) infinite; 
    -webkit-transform-origin: center center; 
    -webkit-transform: translate3d(0, 0, 0);
    -moz-animation: spin 500ms steps(30) infinite; 
    -moz-transform-origin: center center; 
    -moz-transform: translate3d(0, 0, 0);
        -webkit-animation-timing-function:ease-in-out;
}

span{
    display:block;
    width: 10px;
    height: 10px; 
    border: 1px rgba(255,255,255,0.1) solid;
    border-radius: 50%;
    -webkit-animation: blink 500ms infinite steps(1); 
    -moz-animation: blink 500ms infinite steps(1); 
    -webkit-animation-timing-function:liner;
}

@-webkit-keyframes spin {
    from{
        -webkit-transform: rotate(0deg)
    }
    to{
        -webkit-transform: rotate(360deg)
    } 
}

@-moz-keyframes spin {
    from{
        -moz-transform: rotate(0deg)
    }
    to{
        -moz-transform: rotate(360deg)
    } 
}

@-webkit-keyframes blink { 
    0% {background: #fff}
    1% {background: none;} 
} 


@-moz-keyframes blink { 
    0% {background: #fff}
    1% {background: none;} 
} 


body{
    background: #232323;
}