JSFiddle - React, Tailwind, and code Playground

HTML

<!-- <div id="mask1">
        adieu
</div> -->

<div id="mask2">
    pute
</div>

<div id="mask3">
  maison
</div>

CSS

div {
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background: url(http://27.media.tumblr.com/tumblr_lgcrktvVwG1qboti3o1_500.jpg) 0 0;
    -webkit-mask: url(http://filedb.experts-exchange.com/incoming/2009/05_w22/144001/mask.png) no-repeat;
    -webkit-mask-position: 10px 10px;
    -webkit-animation: movemask 3s ease-in-out infinite;
}

div#mask2 {
    -webkit-animation-delay: 1s;
    background-image: url(http://25.media.tumblr.com/tumblr_lfyji5LXxk1qzy9ouo1_500.jpg);
}

div#mask3 {
    -webkit-animation-delay: 2s;
    background-image: url(http://img.ffffound.com/static-data/assets/6/035bc882469906ed7016d03f442d9d59aaa1e5d3_m.jpg);
}

@-webkit-keyframes movemask {
    0% {
      -webkit-mask-position: 10px 10px;
      -webkit-transform: rotate(0deg); 
    }
    50% {
       background-position: 20px 40px;
       -webkit-mask-position: 100px 107px;
       -webkit-transform: rotate(12deg);     
    }
    80% {
        z-index: 20;
       background-position: 100px 20px;
       -webkit-mask-position: -100px 107px;
       -webkit-transform: rotate(-12deg) scale(1.2);    
    }
    100% {
        z-index: 20;
       background-position: 0 0;
       -webkit-mask-position: 10px 10px;
       -webkit-transform: rotate(0); 
    }
}