SOURCE

<div class="wrap">
	<div class="list">
		<div class="item item1"></div>
		<div class="item item2"></div>
		<div class="item item3"></div>
		<div class="item item4"></div>
		<div class="item item5"></div>
		<div class="item item6"></div>
		<div class="item item7"></div>
	</div>
</div>

.wrap {
    width: 70px;
    height: 70px;
    overflow: hidden;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
}

.list {
    width: 490px;
    height: 70px;
    display: flex;
    position: absolute;
    left: 0;
    top: 0;
    animation: move steps(7) 1s infinite;
    animation-play-state: paused;
    animation-delay: -0.4s;
}

.list:hover {
    animation-play-state: running;
}

@keyframes move {
    from {
        left: 0;
    }
    to {
        left: -490px;
    }
}

.list .item {
    flex: 1;
    border: 5px solid #000;
    box-shadow: 0 0 4px inset #ccc;
    cursor: pointer;
}

.item.item1 {
    background: red;
    border-radius: 0% 100% 0% 100% / 100% 0% 100% 0%;
}

.item.item2 {
    background: orange;
    border-radius: 100% 0% 100% 0% / 100% 100% 0% 0%;
}

.item.item3 {
    background: yellow;
    border-radius: 100% 0% 0% 100% / 0% 100% 0% 100%;
}

.item.item4 {
    background: green;
    border-radius: 0% 100% 100% 0% / 0% 0% 100% 100%;
}

.item.item5 {
    background: cyan;
    border-radius: 0% 100% 100% 0% / 0% 100% 0% 100%;
}

.item.item6 {
    background: blue;
    border-radius: 50%;
}

.item.item7 {
    background: purple;
    /* border-radius: 71% 29% 42% 58% / 47% 35% 65% 53%; */
}