Reebok ink effect

index.html

<div id="fondo">
  <h1>Hey!</h1>
</div>
<div id="encima"></div>

Reebok ink effect.markdown

Reebok ink effect

The effect was taken from http://fitness.reebok.com/international/be-more-human/#/home, I only understood how it worked , and replicate. Only works for webkit browsers

A Pen by Ricardo Soto on CodePen.

License.

style.css

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

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

#encima{
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  -webkit-mask: url(http://i.imgur.com/AYJuRke.png);
  -webkit-mask-size: 3000% 100%;
  
  -webkit-animation: mask-playzero 2s steps(29) infinite;
}

#encima:before{
  content: '';
  background: url(http://i.imgur.com/dJLNhFN.jpg) no-repeat left top;
  background-size: cover;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

@-webkit-keyframes mask-playzero {
    from {
    -webkit-mask-position: 0 0;
    -ms-mask-position: 0 0;
    -moz-mask-position: 0 0;
    -o-mask-position: 0 0;
    mask-position: 0 0;
}
to {
    -webkit-mask-position: 100% 0;
    -ms-mask-position: 100% 0;
    -moz-mask-position: 100% 0;
    -o-mask-position: 100% 0;
    mask-position: 100% 0;
}
  
  @keyframes mask-playzero {
    from {
    -webkit-mask-position: 0 0;
    -ms-mask-position: 0 0;
    -moz-mask-position: 0 0;
    -o-mask-position: 0 0;
    mask-position: 0 0;
}
to {
    -webkit-mask-position: 100% 0;
    -ms-mask-position: 100% 0;
    -moz-mask-position: 100% 0;
    -o-mask-position: 100% 0;
    mask-position: 100% 0;
}