// // Modals // -------------------------------------------------- .modal { position: fixed; top: 0; opacity: 0; z-index: 11; width: 100%; min-height: 100%; overflow: hidden; background-color: #fff; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); -webkit-transition: -webkit-transform .25s, opacity 1ms .25s; transition: transform .25s, opacity 1ms .25s; -webkit-transition-timing-function: cubic-bezier(.1, .5, .1, 1); // Inspired by @c2prods // Active modal &.active { opacity: 1; height: 100%; -webkit-transition: -webkit-transform .25s; transition: transform .25s; -webkit-transition-timing-function: cubic-bezier(.1, .5, .1, 1); // Inspired by @c2prods -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }