diff --git a/dist/ratchet.css b/dist/ratchet.css index 9df67a1..f44e38c 100644 --- a/dist/ratchet.css +++ b/dist/ratchet.css @@ -979,14 +979,16 @@ input[type="button"] { background-color: #fff; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); - -webkit-transition: -webkit-transform .25s ease-in-out, opacity 1ms .25s; - transition: transform .25s ease-in-out, opacity 1ms .25s; + -webkit-transition: -webkit-transform .25s, opacity 1ms .25s; + transition: transform .25s, opacity 1ms .25s; + -webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); } .modal.active { opacity: 1; height: 100%; - -webkit-transition: -webkit-transform .25s ease-in-out; - transition: transform .25 ease-in-out; + -webkit-transition: -webkit-transform .25s; + transition: transform .25s; + -webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } diff --git a/lib/sass/modals.scss b/lib/sass/modals.scss index b865714..7632d75 100644 --- a/lib/sass/modals.scss +++ b/lib/sass/modals.scss @@ -13,15 +13,17 @@ background-color: #fff; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); - -webkit-transition: -webkit-transform .25s ease-in-out, opacity 1ms .25s; - transition: transform .25s ease-in-out, opacity 1ms .25s; + -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 ease-in-out; - transition: transform .25 ease-in-out; + -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); }