@charset "utf-8"; .dialog__overlay { -webkit-transition-duration: 0.4s; transition-duration: 0.4s; } .dialog__content { overflow: hidden; } .dialog.dialog--open .dialog__content, .dialog.dialog--close .dialog__content { -webkit-animation-duration: 0.4s; animation-duration: 0.4s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .dialog.dialog--open .dialog__content { -webkit-animation-name: anim-open; animation-name: anim-open; -webkit-animation-timing-function: cubic-bezier(0.7,0,0.3,1); animation-timing-function: cubic-bezier(0.7,0,0.3,1); } .dialog.dialog--close .dialog__content { -webkit-animation-name: anim-close; animation-name: anim-close; } .dialog.dialog--open h2, .dialog.dialog--open button { -webkit-animation: anim-elem 0.4s both; animation: anim-elem 0.4s both; } .dialog.dialog--open h2 { -webkit-animation-delay: 0.25s; animation-delay: 0.25s; } .dialog.dialog--open button { -webkit-animation-delay: 0.15s; animation-delay: 0.15s; } @-webkit-keyframes anim-open { 0% { opacity: 0; -webkit-transform: translate3d(0, -400px, 0); } 100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); } } @keyframes anim-open { 0% { opacity: 0; -webkit-transform: translate3d(0, -400px, 0); transform: translate3d(0, -400px, 0); } 100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes anim-close { 0% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); } 100% { opacity: 0; -webkit-transform: translate3d(0, 100px, 0); } } @keyframes anim-close { 0% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { opacity: 0; -webkit-transform: translate3d(0, 100px, 0); transform: translate3d(0, 100px, 0); } } /* Inner elements animations */ @-webkit-keyframes anim-elem { 0% { opacity: 0; -webkit-transform: translate3d(0, -100px, 0); } 100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); } } @keyframes anim-elem { 0% { opacity: 0; -webkit-transform: translate3d(0, -100px, 0); transform: translate3d(0, -100px, 0); } 100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }