.mouse-out .article-container {
  opacity: 0;
  pointer-events: none;
  -webkit-transform: scale(.8);
          transform: scale(.8);
  -webkit-transition: all .6s cubic-bezier(.5,0,1,.5);
  transition: all .6s cubic-bezier(.5,0,1,.5);
}

.article-container {
  -webkit-transition: all 3s .3s cubic-bezier(0,1,.3,1);
  transition: all 3s .3s cubic-bezier(0,1,.3,1);
}

.modal {
  opacity: 0;
  -webkit-transform: scale(2) rotateX(30deg) translateY(10em);
          transform: scale(2) rotateX(30deg) translateY(10em);
  -webkit-transition: opacity .2s .3s ease-out,
              -webkit-transform .5s cubic-bezier(1,0,.3,1);
  transition: opacity .2s .3s ease-out,
              -webkit-transform .5s cubic-bezier(1,0,.3,1);
  transition: transform .5s cubic-bezier(1,0,.3,1),
              opacity .2s .3s ease-out;
  transition: transform .5s cubic-bezier(1,0,.3,1),
              opacity .2s .3s ease-out,
              -webkit-transform .5s cubic-bezier(1,0,.3,1);
}

.mouse-out .modal {
  opacity: 1;
  -webkit-transform: none;
          transform: none;
  -webkit-transition: opacity .2s .6s ease-out,
              -webkit-transform 1s .2s cubic-bezier(1,0,.3,1.5);
  transition: opacity .2s .6s ease-out,
              -webkit-transform 1s .2s cubic-bezier(1,0,.3,1.5);
  transition: transform 1s .2s cubic-bezier(1,0,.3,1.5),
              opacity .2s .6s ease-out;
  transition: transform 1s .2s cubic-bezier(1,0,.3,1.5),
              opacity .2s .6s ease-out,
              -webkit-transform 1s .2s cubic-bezier(1,0,.3,1.5);
}