.revealer {
  position: absolute;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  background: #fff;
  top: -2px;
  left: -2px;
  opacity: 0;
  pointer-events: none;
}
.revealer--right { transform-origin: 100% 50%; }
.revealer--left { transform-origin: 0% 50%; }
.revealer--top { transform-origin: 50% 0%; }
.revealer--bottom { transform-origin: 50% 100%; }
.revealer--showX,.revealer--hideX,.revealer--showY,.revealer--hideY,.revealer--visible { opacity: 1; }
.revealer--hideX { animation: hideX 0.8s cubic-bezier(0.7,0,0.3,1) forwards; }
@keyframes hideX { from { transform: scale3d(0,1,1); } to { transform: scale3d(1,1,1); } }
.revealer--showX { animation: showX 0.8s cubic-bezier(0.7,0,0.3,1) forwards; }
@keyframes showX { to { opacity: 1; transform: scale3d(0,1,1); } }
.revealer--hideY { animation: hideY 0.8s cubic-bezier(0.7,0,0.3,1) forwards; }
@keyframes hideY { from { transform: scale3d(1,0,1); } to { transform: scale3d(1,1,1); } }
.revealer--showY { animation: showY 0.8s cubic-bezier(0.7,0,0.3,1) forwards; }
@keyframes showY { to { opacity: 1; transform: scale3d(1,0,1); } }