X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/2dcc5105ad0b4f7701099b57f89f45de0d0ff8e8..refs/pull/806/head:/resources/assets/sass/_animations.scss diff --git a/resources/assets/sass/_animations.scss b/resources/assets/sass/_animations.scss index e6e85ef8e..c03553d15 100644 --- a/resources/assets/sass/_animations.scss +++ b/resources/assets/sass/_animations.scss @@ -2,7 +2,7 @@ .anim.fadeIn { opacity: 0; animation-name: fadeIn; - animation-duration: 160ms; + animation-duration: 180ms; animation-timing-function: ease-in-out; animation-fill-mode: forwards; } @@ -36,41 +36,12 @@ } } -.anim.notification { - transform: translate3d(580px, 0, 0); - animation-name: notification; - animation-duration: 3s; - animation-timing-function: ease-in-out; - animation-fill-mode: forwards; - &.stopped { - animation-name: notificationStopped; - } -} - -@keyframes notification { - 0% { - transform: translate3d(580px, 0, 0); - } - 10% { - transform: translate3d(0, 0, 0); - } - 90% { - transform: translate3d(0, 0, 0); - } - 100% { - transform: translate3d(580px, 0, 0); - } -} -@keyframes notificationStopped { - 0% { - transform: translate3d(580px, 0, 0); - } - 10% { - transform: translate3d(0, 0, 0); - } - 100% { - transform: translate3d(0, 0, 0); - } +.anim.menuIn { + transform-origin: 100% 0%; + animation-name: menuIn; + animation-duration: 120ms; + animation-delay: 0s; + animation-timing-function: cubic-bezier(.62, .28, .23, .99); } @keyframes menuIn { @@ -85,14 +56,6 @@ } } -.anim.menuIn { - transform-origin: 100% 0%; - animation-name: menuIn; - animation-duration: 120ms; - animation-delay: 0s; - animation-timing-function: cubic-bezier(.62, .28, .23, .99); -} - @keyframes loadingBob { 0% { transform: translate3d(0, 0, 0); @@ -110,3 +73,24 @@ transform: translate3d(0, 0, 0); } } + +@keyframes pointer { + 0% { + transform: translate3d(0, 20px, 0) scale3d(0, 0, 0); + } + 100% { + transform: translate3d(0, 0, 0) scale3d(1, 1, 1); + } +} + +.anim.pointer { + transform-origin: 50% 100%; + animation-name: pointer; + animation-duration: 180ms; + animation-delay: 0s; + animation-timing-function: cubic-bezier(.62, .28, .23, .99); +} + +.selectFade { + transition: background-color ease-in-out 3000ms; +} \ No newline at end of file