title: Why is this css gooey not working?
body: <p>I checked out different gooey pens and filtered out the magic property seems like to be the filter on the parent element of the gooey childs.But why isnt my gooey working or did I miss the magic?</p>
  
  <p><a href="http://codepen.io/phng/pen/zNjpbR" rel="nofollow noreferrer">http://codepen.io/phng/pen/zNjpbR</a></p>
  
  <p>scss</p>
  
  <pre><code>.box {
  width: 140px;
  height: 75px;
  border: 1px solid;
  margin: auto;
  position: relative;
  filter: blur(20px) contrast(30);
  // animation: gooey 4s infinite;
  @keyframes gooey {
      50% {
          width: 120px;
      }
  }
  .ball {
      width: 75px;
      height: 75px;
      border-radius: 100%;
      background-color: #000;
      position: absolute;
      left: 0;
      &amp;:last-child {
          right: 0;
          left: auto;
      }
  }
  </code></pre>
  
  <p>}</p>