h1 Animated mask-image is a thing

img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/851550/sponge.jpg")

h2 Neat huh?

img {
  mask-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/851550/spongebob.gif);
  mask-size: contain;
  mask-repeat: no-repeat;
  max-width:100%;
}



// unrelated styles below - feel free to steal the checkerboard mixin
@mixin checker($c1, $c2, $size){
  background-image: linear-gradient(45deg, $c1 25%, $c2 25%),
                    linear-gradient(-45deg, $c1 25%, $c2 25%),
                    linear-gradient(45deg, $c2 75%, $c1 75%),
                    linear-gradient(-45deg, $c2 75%, $c1 75%);
  background-size: $size*2 $size*2;
  background-position: 0 0, 0 $size, $size -#{$size}, -#{$size} 0;
}

body{
  padding:40px;
  text-align:center;
  font-family:monospace;
  @include checker(darken(white,8), transparent, 10px);
}

//someone find a use for this please