SOURCE

var clipPath = function(t) {
  if (!t) {
    return false
  }
  t.removeAttribute("id");
  var r = {
    height: t.clientHeight,
    width: t.clientWidth,
    distance: 60,
    html: t.outerHTML
  };
  if (window.getComputedStyle(document.body).webkitClipPath) {
    var a = r.distance,
    n = r.width,
    e = r.height;
    var o = "";
    for (var i = 0; i < n; i += a) {
      for (var h = 0; h < e; h += a) {
        var d = [i, h],
        u = [i, h + a],
        l = [i + a, h + a],
        v = [i + a, h];
        var c = [i + a / 2, h + a / 2];
        var m = [[d, c, v], [d, u, c], [c, u, l], [v, c, l]];
        m.forEach(function(t, a) {
          var n = t.map(function(t) {
            return t.map(function(t) {
              return t + "px"
            }).join(" ")
          }).join();
          var e = "-webkit-clip-path: polygon(" + n + ");";
          var i = Math.random();
          var h = i < .5 ? -1 : 1;
          var u = [600 * (.5 - Math.random()), 600 * (.5 - Math.random())];
          var l = "translate(" + u.map(function(t) {
            return t + "px"
          }).join() + ") rotate(" + Math.round(h * 360 * Math.random()) + "deg)";
          var v = "-webkit-transform:" + l + ";transform:" + l + ";";
          o = o + r.html.replace('">', '" style="' + e + v + '">')
        })
      }
    }
    t.parentNode.innerHTML = r.html + o;
    return true
  } else {
    t.className += " no-clipath";
    return false
  }
};

var eleText = document.getElementById('text');
// 父级元素
var eleParentText = eleText.parentNode;

var eleBtnText = document.getElementById('playText');

// 碎片特效初始化
var isSupport =clipPath(eleText);

// 点击播放
if (isSupport) {
  eleBtnText.onclick = function() {
    eleParentText.classList.remove('active');
    eleParentText.offsetHeight;
    eleParentText.classList.add('active');
  };
}

<div class="box active">
  <p id="text" class="text clip">
    其中，will-change作用是让动画更流畅，可参见我之前文章：“使用CSS3 will-change提高页面滚动、动画等渲染性能”。.active .clip[style]这段CSS表示的意思是，只要被剪裁的三角们的父级有了类名active, 所有的三角的位置就不是随机分布，而是会以动画形式归位到其原本的位置。没错，是所有，我们没有必要对每一个剪裁的三角碎片做动画，只要归位就可以。通过toggle类名active, 碎片的动效就可以不停地呈现，经测试，在移动端效果也是不错的。
目前，除了IE浏览器和Android4.3-都支持了clip-path，不过还需要-webkit-私有前缀。
  </p>
</div>
<p>
  <button id="playText">
    重复播放
  </button>
</p>

.clip[style] {
  opacity: 0;
}

.active .clip:not([style]) {
  opacity: 0;
  animation: fadeIn .1s .4s both;
}

.active .clip[style] {
  will-change: transform;
  animation: noTransform .5s both;
}

@keyframes noTransform {
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.box {
  height: 190px;
}

.text {
  position: absolute;
  width: 400px;
}

.image {
  position: absolute;
}