SOURCE

<div class="demo">

	<img class="avatar" src="//oss.syndev.top/learn/CSS_New_World/image/wallpaper-1.jpg">
    <img class="avatar" src="//oss.syndev.top/learn/CSS_New_World/image/wallpaper-2.jpg">
    <img class="avatar" src="//oss.syndev.top/learn/CSS_New_World/image/m/1.jpg">
    <img class="avatar" src="//oss.syndev.top/learn/CSS_New_World/image/wallpaper-3.jpg">
    <img class="avatar" src="//oss.syndev.top/learn/CSS_New_World/image/wallpaper-4.jpg">
    <img class="avatar" src="//oss.syndev.top/learn/CSS_New_World/image/m/2.jpg">

    <br><br>
    <p>另外一种直接设置圆角的方法<mark><a href="https://www.zhangxinxu.com/study/201702/cicada-principle-border-radius.html">访问这里</a></mark>。</p>
</div>

.demo {
    max-width: 400px;
    margin: auto;
}
.demo img {
    margin: .25rem;
}
.avatar {
    width: 100px; height: 100px;
    border-radius: 50%;
    object-fit: cover;
    animation: morph 6s paused linear;
    border: solid deepskyblue;
}
@keyframes morph {
    0% { 
        border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%;
        transform: rotate(-5deg);
    }
    100% { 
        border-radius: 40% 60%;
        transform: rotate(5deg);
    } 
}
/* 第四个 */
.avatar:nth-child(4n) {
    animation-delay: -3.5s;
}
/* 第一个 第三个 */
.avatar:nth-child(2n+1) {
    animation-delay: -1s;
}
/* 第二个 第五个 */
.avatar:nth-child(3n+2) {
    animation-delay: -2s;
}

/* 第三个 第八个 */
.avatar:nth-child(5n+3) {
    animation-delay: -3s;
}
/*第5,12个  */
.avatar:nth-child(7n+5) {
    animation-delay: -4s;
}
/*第7,18个  */
.avatar:nth-child(11n+7) {
    animation-delay: -5s;
}