CSS-only blob animation

css-only-blob-animation.markdown

CSS-only blob animation

A Pen by Marcos Silva on CodePen.

License.

index.html

<div class="wrapper">
  <p><span></span></p>
  <p><span></span></p>
</div>

style.scss

.wrapper {
  position: absolute;
  width: 500px;
  height: 500px;
  top: 50%;
  left: 50%;
  margin: -250px;
  background:white;
  filter:blur(10px) contrast(15);

  span {
    background: black;
    position: absolute;
    border-radius: 50%;
    display: inline-block;
  }
  
  p {
    position: absolute;
    top: 50%;
    left: 50%;
  }
  
  p:nth-child(1) {
    position: absolute;
    animation: skewing-child .2s ease-in-out infinite alternate;
    
    span {
      width: 50px;
      height: 50px;
      margin: -25px;
      animation: moving 2s cubic-bezier(.97,.01,.12,.99) infinite alternate;
    }
  }
  
  p:nth-child(2) {
    position: absolute;
    animation: squishing 1s ease-in-out infinite alternate;
    
    span {
      width: 120px;
      height: 120px;
      top: 50%;
      left: 50%;
      margin: -60px;
      animation: skewing 2s 1.5s ease-in-out infinite;
    }
  } 
}

@keyframes skewing {
  0% { transform: skewX(6deg); }
  10% { transform: skewX(-6deg); }
  20% { transform: skewX(4deg); }
  30% { transform: skewX(-4deg); }
  40% { transform: skewX(2deg); }
  50% { transform: skewX(-6deg); }
  55% { transform: skewX(6deg); }
  60% { transform: skewX(-5deg); }
  65% { transform: skewX(5deg); }
  70% { transform: skewX(-4deg); }
  75% { transform: skewX(4deg); }
  80% { transform: skewX(-3deg); } 
  85% { transform: skewX(3deg); }
  90% { transform: skewX(-2deg); } 
  95% { transform: skewX(2deg); }
  100%   { transform: skewX(1deg); }
}

@keyframes skewing-child {
  0%      { transform: skewX(-10deg); }
  100%     { transform: skewX(10deg); }
}

@keyframes moving {
  0% {transform: translate(-200px);}
  30% {transform: translate(-45px);} 
  70% {transform: translate(45px);}
  100% {transform: translate(200px);}
}

@keyframes squishing {
  10%, 40%, 80% { transform: scale(1, .9); }
  0%, 30%, 60%, 100% {transform: scale(.9, 1);}
}