Off animation

by Lazaro Contreras

HTML

<div></div>

CSS

html {
  background: black;
}

@keyframes off {
  to {
    top: 50%;
    height: 0%;
    background: white;
  }
}

div {
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: url('/img/logo.png') #f1f1f1;
}

JavaScript

var div = document.querySelector('div');
var vel = 350;
div.onclick = function() {
  div.style.animation = 'off ' + vel + 'ms 1 ease';
  setTimeout(function() {
    div.remove();
  }, vel, div)
}