diff --git a/src/definitions/modules/transition.js b/src/definitions/modules/transition.js index 3cc10e30c..2592b88a3 100755 --- a/src/definitions/modules/transition.js +++ b/src/definitions/modules/transition.js @@ -790,7 +790,7 @@ $.fn.transition.settings = { // animation duration animation : 'fade', - duration : '700ms', + duration : '500ms', // new animations will occur after previous ones queue : true, diff --git a/src/themes/packages/default/modules/transition.overrides b/src/themes/packages/default/modules/transition.overrides index 4b2aa3347..b172b8191 100755 --- a/src/themes/packages/default/modules/transition.overrides +++ b/src/themes/packages/default/modules/transition.overrides @@ -2,80 +2,6 @@ Animations *******************************/ -.ui.browse.transition { -} - -.ui.browse.transition.in { - animation-name: browseIn; - animation-timing-function: ease; -} -.ui.browse.transition.out.left { - animation-name: browseOutLeft; - animation-timing-function: ease; -} -.ui.browse.transition.out.right { - animation-name: browseOutRight; - animation-timing-function: ease; -} - -@keyframes browseIn { - 0% { - transform: scale(0.8) translateZ(0px); - z-index: -1; - } - 10% { - transform: scale(0.8) translateZ(0px); - z-index: -1; - opacity: 0.7; - } - 80% { - transform: scale(1.05) translateZ(0px); - opacity: 1; - z-index: 999; - } - 100% { - transform: scale(1) translateZ(0px); - z-index: 999; - } -} -@keyframes browseOutLeft { - 0% { - z-index: 999; - transform: translateX(0%) rotateY(0deg) rotateX(0deg); - } - 50% { - z-index: 1; - transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); - } - 80% { - opacity: 1; - } - 100% { - z-index: 1; - transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); - opacity: 0; - } -} -@keyframes browseOutRight { - 0% { - z-index: 999; - transform: translateX(0%) rotateY(0deg) rotateX(0deg); - } - 50% { - z-index: 1; - transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); - } - 80% { - opacity: 1; - } - 100% { - z-index: 1; - transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); - opacity: 0; - } -} - - /*-------------- Emphasis ---------------*/ @@ -406,4 +332,115 @@ opacity: 0; transform: scale(0.7); } +} + +/*-------------- + Drop +---------------*/ + +.ui.drop.transition { + transform-origin: top center; + animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1); +} +.ui.drop.transition.in { + animation-name: dropIn; +} +.ui.drop.transition.out { + animation-name: dropOut; +} + +/* Scale */ +@keyframes dropIn { + 0% { + opacity: 0; + transform: scale(0); + } + 100% { + opacity: 1; + transform: scale(1); + } +} +@keyframes dropOut { + 0% { + opacity: 1; + transform: scale(1); + } + 100% { + opacity: 0; + transform: scale(0); + } +} + +/*-------------- + Browse +---------------*/ + +.ui.browse.transition.in { + animation-name: browseIn; + animation-timing-function: ease; +} +.ui.browse.transition.out.left { + animation-name: browseOutLeft; + animation-timing-function: ease; +} +.ui.browse.transition.out.right { + animation-name: browseOutRight; + animation-timing-function: ease; +} + +@keyframes browseIn { + 0% { + transform: scale(0.8) translateZ(0px); + z-index: -1; + } + 10% { + transform: scale(0.8) translateZ(0px); + z-index: -1; + opacity: 0.7; + } + 80% { + transform: scale(1.05) translateZ(0px); + opacity: 1; + z-index: 999; + } + 100% { + transform: scale(1) translateZ(0px); + z-index: 999; + } +} +@keyframes browseOutLeft { + 0% { + z-index: 999; + transform: translateX(0%) rotateY(0deg) rotateX(0deg); + } + 50% { + z-index: 1; + transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); + } + 80% { + opacity: 1; + } + 100% { + z-index: 1; + transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); + opacity: 0; + } +} +@keyframes browseOutRight { + 0% { + z-index: 999; + transform: translateX(0%) rotateY(0deg) rotateX(0deg); + } + 50% { + z-index: 1; + transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); + } + 80% { + opacity: 1; + } + 100% { + z-index: 1; + transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); + opacity: 0; + } } \ No newline at end of file diff --git a/src/themes/packages/default/modules/transition.variables b/src/themes/packages/default/modules/transition.variables index 80ceb816e..75334d99b 100755 --- a/src/themes/packages/default/modules/transition.variables +++ b/src/themes/packages/default/modules/transition.variables @@ -4,7 +4,7 @@ @transitionDefaultEasing: @defaultEasing; @transitionDefaultFill: both; -@transitionDefaultDuration: 1s; +@transitionDefaultDuration: 500ms; @use3DAcceleration: translateZ(0); @backfaceVisibility: hidden; \ No newline at end of file