css3-radio不规则形状动画

.list {
margin: 10px;
display: inline-block;
width: 168px; height: 168px;
border: 4px solid #00C7E9;
border-radius: 87% 91% 98% 100%;
-webkit-transition: all .35s;
transition: all .35s;
overflow: hidden;
}
.list img{
min-height: 100%;
width: -webkit-calc(50% + 50%);
height: -webkit-calc(50% + 50%);
object-fit: cover;
background: #ddd;
}

.list:hover {
border-radius: 95% 70% 100% 80%;
transform: rotate(-2deg);
}

.list:nth-child(2n+1) {
border-radius: 59% 52% 56% 59%;
transform: rotate(-6deg);
}

.list:nth-child(2n+1):hover {
border-radius: 51% 67% 56% 64%;
transform: rotate(-4deg);
}

.list:nth-child(3n+2) {
border-radius: 84% 94% 83% 72%;
transform: rotate(5deg);
}

.list:nth-child(3n+2):hover {
border-radius: 69% 64% 53% 70%;
transform: rotate(0deg);
}

.list:nth-child(5n+3) {
border-radius: 73% 100% 82% 100%;
transform: rotate(7deg);
}

.list:nth-child(5n+3):hover {
border-radius: 73%;
transform: rotate(7deg);
}

.list:nth-child(7n+5) {
border-radius: 93% 90% 85% 78%;
transform: rotate(-2deg);
}

.list:nth-child(7n+5):hover {
border-radius: 53% 70% 85% 68%;
transform: rotate(-2deg);
}

.list:nth-child(11n+7) {
border-radius: 68% 68% 83% 53%;
transform: rotate(-2deg);
}

.list:nth-child(11n+7):hover {
border-radius: 58% 98% 78% 83%;
transform: rotate(3deg);
}

<div class="constr">
<div class="list"><img src="../test1.jpg"></div>
<div class="list"><img src="../test1.jpg"></div>
<div class="list"><img src="../test1.jpg"></div>
<div class="list"><img src="../test1.jpg"></div>
<div class="list"><img src="../test1.jpg"></div>
<div class="list"><img src="../test1.jpg"></div>
<div class="list"><img src="../test1.jpg"></div>
<div class="list"><img src="../test1.jpg"></div>
<div class="list"><img src="../test1.jpg"></div>
<div class="list"><img src="../test1.jpg"></div>
<div class="list"><img src="../test1.jpg"></div>
<div class="list"><img src="../test1.jpg"></div>
</div>