#photo{
  animation: blur 4s 1;
  height: 200vmin;
  width: 200vmin;
}

#photo div{
  height: 70%;
  position: absolute;
  width: 100%;
}

#white{
  animation: mask 3s steps(69) 1;
  background-color: #f9f8f5;
  -webkit-mask: url('../images/sheet.png');
  -webkit-mask-size: 7000% 100%;
  mask: url('../images/sheet.png');
  mask-size: 7000% 100%;
  animation-fill-mode: forwards;
}

@keyframes blur{
  from{
    filter: blur(3px);
    opacity: 0;
  }
  to{
    filter: blur(0px);
    opacity: 1;
  }
}

@keyframes mask{
  from{
	  -webkit-mask-position: 0% 0;
	  mask-position: 0% 0;
  }
  to{
	  -webkit-mask-position: 100% 0;
	  mask-position: 100% 0;
  }
}