我想降低动画的速度

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;