動畫循環 - CSS

Question

你好我創建使用CSS簡單的無限循環動畫，但有一個簡單的問題，我需要在動畫循環永遠順利。

.rotate{ 
 
    width:200px; 
 
    height:200px; 
 
    margin:50px auto; 
 
    background-color:#00e95a; 
 
    animation-name:rotate; 
 
    animation-duration:1s; 
 
    animation-iteration-count:infinite; 
 
    animation-fill-mode:both; 
 
} 
 
@keyframes rotate { 
 
    from { 
 
     -moz-transform: rotate(0); 
 
     -ms-transform: rotate(0); 
 
     -o-transform: rotate(0); 
 
     -webkit-transform: rotate(0); 
 
     transform: rotate(0); 
 
    } 
 

 
    to { 
 
     -moz-transform: rotate(-360deg); 
 
     -ms-transform: rotate(-360deg); 
 
     -o-transform: rotate(-360deg); 
 
     -webkit-transform: rotate(-360deg); 
 
     transform: rotate(-360deg); 
 
    } 
 
}

<div class="rotate"> 
 

 
    </div>

Answer 1

只需添加animation-timing-function: linear;。

注意：問題是由默認的定時狀態，這是緩解。

.rotate { 
 
    width: 200px; 
 
    height: 200px; 
 
    margin: 50px auto; 
 
    background-color: #00e95a; 
 
    animation-name: rotate; 
 
    animation-duration: 1s; 
 
    animation-iteration-count: infinite; 
 
    animation-fill-mode: both; 
 
    animation-timing-function: linear; 
 
} 
 

 
@keyframes rotate { 
 
    from { 
 
    -moz-transform: rotate(0); 
 
    -ms-transform: rotate(0); 
 
    -o-transform: rotate(0); 
 
    -webkit-transform: rotate(0); 
 
    transform: rotate(0); 
 
    } 
 
    to { 
 
    -moz-transform: rotate(-360deg); 
 
    -ms-transform: rotate(-360deg); 
 
    -o-transform: rotate(-360deg); 
 
    -webkit-transform: rotate(-360deg); 
 
    transform: rotate(-360deg); 
 
    } 
 
}

<div class="rotate"></div>

Answer 2

由於@Kind用戶已經提到，你應該硬重置animation-timing-function到linear，因爲初值的animation-timing-function爲ease。

參考：https://developer.mozilla.org/en/docs/Web/CSS/animation-timing-function