Reebok Ink Effect

Ink transition animation between two background images.

by Jon Fuller

HTML

<div id="yep"></div>
<div id="mmk"></div>

CSS

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

#yep{
  background: url(http://i.stack.imgur.com/yEQ6k.jpg) no-repeat left top;
  background-size: cover;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

#yep:after{
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  -webkit-mask: url(https://veuwer.com/i/3fxb.png);
  -webkit-mask-size: 3000% 100%;
  -webkit-animation: mask-playzero 12s steps(29) infinite;
}

#yep:before{
  content: '';
  background: url(http://bingebehavior.com/wp-content/uploads/2013/01/Background-Plum-Light.png) no-repeat left top;
  background-size: cover;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

@-webkit-keyframes mask-playzero {
    0% {
        -webkit-mask-position: 0 0;
        -ms-mask-position: 0 0;
        -moz-mask-position: 0 0;
        -o-mask-position: 0 0;
        mask-position: 0 0;
    }
    12.5% {
        -webkit-mask-position: 100% 0;
        -ms-mask-position: 100% 0;
        -moz-mask-position: 100% 0;
        -o-mask-position: 100% 0;
        mask-position: 100% 0;
    }
    50% {
        -webkit-mask-position: 100% 0;
        -ms-mask-position: 100% 0;
        -moz-mask-position: 100% 0;
        -o-mask-position: 100% 0;
        mask-position: 100% 0;
    }
    62.5% {
        -webkit-mask-position: 0 0;
        -ms-mask-position: 0 0;
        -moz-mask-position: 0 0;
        -o-mask-position: 0 0;
        mask-position: 0 0;
    }
}
  
@keyframes mask-playzero {
    0% {
        -webkit-mask-position: 0 0;
        -ms-mask-position: 0 0;
        -moz-mask-position: 0 0;
        -o-mask-position: 0 0;
        mask-position: 0 0;
    }
    12.5% {
        -webkit-mask-position: 100% 0;
        -ms-mask-position: 100% 0;
        -moz-mask-position: 100% 0;
        -o-mask-position: 100% 0;
        mask-position: 100% 0;
    }
    50% {
        -webkit-mask-position: 100% 0;
        -ms-mask-position: 100% 0;
       ...