A CodePen by adrianleb.

index.html

<div class="blob clockwise"></div>
<div class="blob anticlockwise blue"></div>
<div class="blob clockwise slower green"></div>

style.scss

@import "compass";
$noise: url(data:image/png;base64,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);

$dim:40rem;

html, body {
  position:relative;
  width:100%;
  height:100%;
}
body { @include background($noise, $noise, radial-gradient(lighten(white, 10%) -50%, darken(white, 20%))); }


.blob {
  width:$dim;
  height:$dim;
  position:absolute;
  left:50%;
  top:0;
  margin-left:-($dim/2);
  margin-top:-$dim * 0.7;
  opacity:0.1;
  background-color:red; 
  -webkit-transition: all 1s ease-in-out;
  @include background($noise,  $noise, radial-gradient(lighten(red, 40%) -50%, darken(red, 10%)));
  -webkit-animation: round 10s alternate infinite linear;
  
  &.clockwise {
    -webkit-transform:rotate(200deg);
    -webkit-animation: round 10s infinite linear;
    border-radius:50%;
  }
  
  &.anticlockwise{
    -webkit-transform:rotate(200deg);
    -webkit-animation: round2 20s infinite linear;
    border-radius:50%;
  }
  
  &.blue { @include background($noise,  $noise, radial-gradient(lighten(blue, 40%) -50%, darken(blue, 10%))); }
  &.green {  @include background($noise, $noise, radial-gradient(lighten(green, 40%) -50%, darken(green, 10%))); }
  
  &.slower { -webkit-animation-duration:30s; }
}


// ====================================
// Animations
// ====================================



@-webkit-keyframes round {
  0% {
    z-index:1;
    border-radius:30%; 
    -webkit-transform:rotate(0deg);
  }  
  20% { -webkit-transform:rotate(300deg); }
  40% { -webkit-transform:rotate(600deg); }
  50% { border-radius:50%; }
  60% { -webkit-transform:rotate(900deg); }
  80% { -webkit-transform:rotate(1200deg); }
  100% {
    border-radius:30%; 
    -webkit-transform:rotate(1440deg);
    z-index:2;
  }
}

@-webkit-keyframes round2 {
  0% {
    z-index:2;
    border-radius:30%; 
    -webkit-transform:rotate(0deg);
  }
  20% { -webkit-transform:rotate(-300deg); }
  40% { -webkit-transform:rotate(-600deg); }
  50% { border-radius:50%; }
  60% { -webkit-transform:rotate(-900deg); }
  80% { -webkit-transform:rotate(-1200deg); }
  100% {
    border-radius:30%; 
    -webkit-transform:rotate(-1440deg);
    z-index:1;
  }
}