.shutter { position: fixed; z-index: 100; top: 0; left: 0; right: 0; bottom: 0; background-color: #000000; animation: bye-shutter 2.6s forwards; }

.shutter::before, .shutter::after { position: absolute; top: 0; left: 0; bottom: 0; margin: auto; content: ""; }

.shutter::before { width: 0; height: 1px; background-color: #6c6c6c; animation: shutter-open1 2.6s forwards; }

.shutter::after { width: 120%; height: 0; margin-left: -10%; background-color: #f3f3f3; animation: shutter-open2 2.6s forwards; }

.content { animation: content-scale 2.6s forwards; }

@keyframes bye-shutter { 70% { opacity: 1; }
  100% { display: none;
    z-index: -1;
    opacity: 0; } }

@keyframes shutter-open1 { 0% { width: 0;
    height: 1px; }
  50% { width: 100%;
    height: 1px; }
  90% { width: 100%;
    height: 100%; }
  100% { width: 100%;
    height: 100%; } }

@keyframes shutter-open2 { 60% { width: 120%;
    height: 0;
    transform: rotate(5deg); }
  90% { width: 120%;
    height: 100%;
    transform: rotate(-5deg); }
  100% { width: 120%;
    height: 100%;
    transform: rotate(-5deg); } }

@keyframes content-scale { 70% { transform: perspective(800px) scale(0.9) rotateX(15deg); }
  100% { transform: perspective(800px) scale(1) rotateX(0); } }