Question

我试图在一起实现无限的眨眼和旋转，但是我面临的问题非常奇怪，应该以500毫秒的规律间隔发生的眨眼，很快就会发生一段时间然后消失并再次出现。

我也经历了很多关于眨眼的问题，但我的测试用例却不同。我无法在关键帧中保持0％50％100％以使闪烁工作，因为我希望跨度以我指定的特定百分比闪烁。

例如：我希望跨度以100deg或90deg闪烁，因此我应该能够通过指定确切的百分比值来指定闪烁时间。

到目前为止，这是我的工作，任何帮助都将受到赞赏。 http://jsfiddle.net/8UQ8X/7/（包括供应商前缀）

<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>

Answer 1

试试这个：Animation

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

眨眼和旋转

1 个答案: