$before : polygon(50% 0, 57% 0, 62% 0, 68% 0, 73% 0, 87% 0, 100% 0, 100% 43%, 100% 62%, 100% 100%, 66% 100%, 56% 100%, 51% 100%, 40% 100%, 18% 100%, 0 100%, 0 68%, 0 51%, 0 43%, 0 28%, 0 0, 16% 0, 28% 0, 38% 0, 44% 0);

$after : polygon(50% 9%, 54% 23%, 58% 20%, 56% 43%, 61% 32%, 63% 38%, 69% 36%, 67% 48%, 70% 52%, 60% 68%, 60% 75%, 51% 73%, 51% 93%, 49% 93%, 49% 73%, 40% 75%, 40% 68%, 30% 52%, 33% 49%, 31% 36%, 37% 38%, 38% 32%, 44% 42%, 42% 20%, 46% 23%);

html, body { height: 100vh; }
body {
  display: flex;
  justify-content: center;
  align-items: center;
  background:
    radial-gradient(
    circle,
    white, 
    whitesmoke
    );
}
div {
  width: 90vmin;
  height: 45vmin;
  background: firebrick;
  background-image: url(http://3.bp.blogspot.com/-qwi0pyXTAkQ/T8VZIZQRSFI/AAAAAAAAIsY/1lHs6kNZATw/s1600/The_Big_Falls_animated-motion-gif.gif);
  background-size: cover;
  background-blend-mode: multiply;
  -webkit-clip-path: $after;
  clip-path: $after;
  transition: 1s;
  animation: canada 1.5s 1s backwards;
  
  
  &:hover {
    -webkit-clip-path: $before;
    clip-path: $before;
    background-color: transparent;
  }
}

@keyframes canada {
  from { 
    -webkit-clip-path: $before;
    clip-path: $before;
    background-color: transparent;
  }
}