A CodePen by turusuke. CSS background effect - no Javascript and Images

index.html

<div>
</div>

style.scss

@import "compass";
@import "compass/css3";

@mixin  animationfunc($animname,$duration,$animfunc,$delay,$count,$direction,$fill) {
     -webkit-animation:$animname $duration $animfunc $delay $count $direction $fill;
     -moz-animation:$animname $duration $animfunc $delay $count $direction $fill;
     -o-animation:$animname $duration $animfunc $delay $count $direction $fill;
     -ms-animation:$animname $duration $animfunc $delay $count $direction $fill;
     animation:$animname $duration $animfunc $delay $count $direction $fill;
}

$startColor : #FFF;
$stopColor  : #000;

@-webkit-keyframes animstart {
  0% { @include background-image(radial-gradient($startColor 0%,#000 100%)); }
  10% { @include background-image(radial-gradient($startColor 10%,$stopColor 100%)); }
  20% { @include background-image(radial-gradient($startColor 20%,$stopColor 100%)); }
  30% { @include background-image(radial-gradient($startColor 30%,$stopColor 100%)); }
  40% { @include background-image(radial-gradient($startColor 40%,$stopColor 100%)); }
  50% { @include background-image(radial-gradient($startColor 50%,$stopColor 100%)); }
  60% { @include background-image(radial-gradient($startColor 60%,$stopColor 100%)); }
  70% { @include background-image(radial-gradient($startColor 70%,$stopColor 100%)); }
  80% { @include background-image(radial-gradient($startColor 80%,$stopColor 100%)); }
  90% { @include background-image(radial-gradient($startColor 90%,$stopColor 100%)); }
  100% { @include background-image(radial-gradient($startColor 100%,$stopColor 100%)); }
}

@-moz-keyframes animstart {
  0% { @include background-image(radial-gradient($startColor 0%,#000 100%)); }
  10% { @include background-image(radial-gradient($startColor 10%,$stopColor 100%)); }
  20% { @include background-image(radial-gradient($startColor 20%,$stopColor 100%)); }
  30% { @include background-image(radial-gradient($startColor 30%,$stopColor 100%)); }
  40% { @include background-image(radial-gradient($startColor 40%,$stopColor 100%)); }
  50% { @include background-image(radial-gradient($startColor 50%,$stopColor 100%)); }
  60% { @include background-image(radial-gradient($startColor 60%,$stopColor 100%)); }
  70% { @include background-image(radial-gradient($startColor 70%,$stopColor 100%)); }
  80% { @include background-image(radial-gradient($startColor 80%,$stopColor 100%)); }
  90% { @include background-image(radial-gradient($startColor 90%,$stopColor 100%)); }
  100% { @include background-image(radial-gradient($startColor 100%,$stopColor 100%)); }
}

@-o-keyframes animstart {
  0% { @include background-image(radial-gradient($startColor 0%,#000 100%)); }
  10% { @include background-image(radial-gradient($startColor 10%,$stopColor 100%)); }
  20% { @include background-image(radial-gradient($startColor 20%,$stopColor 100%)); }
  30% { @include background-image(radial-gradient($startColor 30%,$stopColor 100%)); }
  40% { @include background-image(radial-gradient($startColor 40%,$stopColor 100%)); }
  50% { @include background-image(radial-gradient($startColor 50%,$stopColor 100%)); }
  60% { @include background-image(radial-gradient($startColor 60%,$stopColor 100%)); }
  70% { @include background-image(radial-gradient($startColor 70%,$stopColor 100%)); }
  80% { @include background-image(radial-gradient($startColor 80%,$stopColor 100%)); }
  90% { @include background-image(radial-gradient($startColor 90%,$stopColor 100%)); }
  100% { @include background-image(radial-gradient($startColor 100%,$stopColor 100%)); }
}

@keyframes animstart {
  0% { @include background-image(radial-gradient($startColor 0%,#000 100%)); }
  10% { @include background-image(radial-gradient($startColor 10%,$stopColor 100%)); }
  20% { @include background-image(radial-gradient($startColor 20%,$stopColor 100%)); }
  30% { @include background-image(radial-gradient($startColor 30%,$stopColor 100%)); }
  40% { @include background-image(radial-gradient($startColor 40%,$stopColor 100%)); }
  50% { @include background-image(radial-gradient($startColor 50%,$stopColor 100%)); }
  60% { @include background-image(radial-gradient($startColor 60%,$stopColor 100%)); }
  70% { @include background-image(radial-gradient($startColor 70%,$stopColor 100%)); }
  80% { @include background-image(radial-gradient($startColor 80%,$stopColor 100%)); }
  90% { @include background-image(radial-gradient($startColor 90%,$stopColor 100%)); }
  100% { @include background-image(radial-gradient($startColor 100%,$stopColor 100%)); }
}

body{
 @include background-image(radial-gradient(#FFF 0%,#000 100%));
 @include animationfunc(animstart,.5s,linear,0s,infinite,alternate,both);
}