我想降低動畫的速度

Question

這裏是我的代碼，我正在動畫一個簡單的div。但問題是，我想在增長到全尺寸時減慢速度，因爲您可以看到它突然閃爍並縮小。

有人可以幫助我。

html { 
 
    background: black; 
 
    overflow: hidden; 
 
    height: 100%; 
 
} 
 

 
.loader { 
 
    height: 40px; 
 
    width: 40px; 
 
    position: absolute; 
 
    left: 50%; 
 
    margin-left: -20px; 
 
    top: 50%; 
 
    margin-top: -20px; 
 
} 
 

 
.loader:before, 
 
.loader:after { 
 
    content: ""; 
 
    height: 40px; 
 
    width: 40px; 
 
    border: 8px solid black; 
 
    border-radius: 10px; 
 
    position: absolute; 
 
    top: 0; 
 
    background-color: red; 
 
} 
 

 
.loader:before { 
 
    animation: animate 5s infinite ease-in-out; 
 
} 
 

 
.loader:after { 
 
    animation: animate2 5s infinite ease-in-out; 
 
} 
 

 
@keyframes animate { 
 
    100% { 
 
    transform: rotate(180deg) skew(360deg); 
 
    } 
 
} 
 

 
@keyframes animate2 { 
 
    100% { 
 
    transform: rotate(-180deg) skew(-360deg); 
 
    } 
 
}

<div class="loader"> 
 
</div>

Answer 1

試試這個以動畫末

animation: animate 5s infinite ease-out;