HTML
<div class="wrapper">
<ul>
<li class="fixe"></li>
<li></li>
<li></li>
</ul>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" />
<feBlend in="SourceGraphic" in2="goo" />
</filter>
</defs>
</svg>
CSS
html, body {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background: #B24592;
background: -webkit-linear-gradient(to left, #B24592 , #F15F79);
background: linear-gradient(to left, #B24592 , #F15F79);
}
.wrapper {
position: relative;
}
ul {
display: block;
padding: 0;
font-size: 0;
filter:url('#goo');
text-align: center;
width: 400px;
}
li {
font-size: 0;
display: inline-block;
border-radius: 50%;
width: 30px;
height: 30px;
margin: 10px;
background: #fff;
transform: translateX(-120px);
animation: dance infinite 3s ease-in-out;
}
li.fixe {
position: absolute;
/* background: red; */
left: 50%;
transform: translateX(-83%) scale(2);
animation: bounce infinite 3s cubic-bezier(0.5, -0.96, 0.53, 1.95);
}
@keyframes dance {
50% {
transform: translateX(120px);
}
}
@keyframes bounce {
50% {
transform: translateX(-83%) scale(2);
}
25%, 75% {
transform: translateX(-83%) scale(3);
}
}
