/* 4 classes: navInLeft, navInRight, navOutLeft, navOutRight */ /*****************************************/ /* Slide forward */ /*****************************************/ .fxSlideForward .navOutNext { -webkit-transform-origin: -50% 50%; transform-origin: -50% 50%; -webkit-animation: scaleDown 0.5s forwards cubic-bezier(0.7, 0, 0.3, 1); animation: scaleDown 0.5s forwards cubic-bezier(0.7, 0, 0.3, 1); } .fxSlideForward .navInNext { -webkit-transform-origin: 150% 50%; transform-origin: 150% 50%; -webkit-animation: scaleUp 0.5s forwards cubic-bezier(0.7, 0, 0.3, 1); animation: scaleUp 0.5s forwards cubic-bezier(0.7, 0, 0.3, 1); } .fxSlideForward .navOutPrev { -webkit-transform-origin: 150% 50%; transform-origin: 150% 50%; -webkit-animation: scaleDown 0.5s forwards cubic-bezier(0.7, 0, 0.3, 1); animation: scaleDown 0.5s forwards cubic-bezier(0.7, 0, 0.3, 1); } .fxSlideForward .navInPrev { -webkit-transform-origin: -50% 50%; transform-origin: -50% 50%; -webkit-animation: scaleUp 0.5s forwards cubic-bezier(0.7, 0, 0.3, 1); animation: scaleUp 0.5s forwards cubic-bezier(0.7, 0, 0.3, 1); } @-webkit-keyframes scaleUp { from { -webkit-transform: scale(0); } to { -webkit-transform: scale(1); opacity: 1; } } @keyframes scaleUp { from { -webkit-transform: scale(0); transform: scale(0); } to { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @-webkit-keyframes scaleDown { from {} /* Fixes Chrome issue 35.0.1916.114 (easing breaks) */ to { -webkit-transform: scale(0); opacity: 0; } } @keyframes scaleDown { from {} /* Fixes Chrome issue 35.0.1916.114 (easing breaks) */ to { -webkit-transform: scale(0); transform: scale(0); opacity: 0; } } /*****************************************/ /* Table Drop */ /*****************************************/ .fxTableDrop .navOutNext { -webkit-animation: slideOutDown 0.4s forwards cubic-bezier(0.7, 0, 0.3, 1); animation: slideOutDown 0.4s forwards cubic-bezier(0.7, 0, 0.3, 1); } .fxTableDrop .navInNext { -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-animation: slideInDown 0.4s 0.2s forwards ease-in; animation: slideInDown 0.4s 0.2s forwards ease-in; } .fxTableDrop .navOutPrev { -webkit-animation: slideOutUp 0.4s forwards cubic-bezier(0.7, 0, 0.3, 1); animation: slideOutUp 0.4s forwards cubic-bezier(0.7, 0, 0.3, 1); } .fxTableDrop .navInPrev { -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-animation: slideInUp 0.4s 0.2s forwards ease-in; animation: slideInUp 0.4s 0.2s forwards ease-in; } @-webkit-keyframes slideOutDown { from {} /* Fixes Chrome issue 35.0.1916.114 (easing breaks) */ 100% { -webkit-transform: translateY(150%); opacity: 0; } } @keyframes slideOutDown { from {} /* Fixes Chrome issue 35.0.1916.114 (easing breaks) */ 100% { -webkit-transform: translateY(150%); transform: translateY(150%); opacity: 0; } } @-webkit-keyframes slideInDown { 0% { -webkit-animation-timing-function: ease-in-out; -webkit-transform: translateY(-150%); } 50% { -webkit-transform: translateY(0) rotate(1deg); opacity: 1; } 70% { -webkit-transform: translateY(0) rotate(-1deg); } 85% { -webkit-transform: translateY(0) rotate(1deg); } 95% { -webkit-transform: translateY(0) rotate(-1deg); } 100% { -webkit-transform: translateY(0); opacity: 1; } } @keyframes slideInDown { 0% { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-transform: translateY(-150%); transform: translateY(-150%); } 50% { -webkit-transform: translateY(0) rotate(1deg); transform: translateY(0) rotate(1deg); opacity: 1; } 70% { -webkit-transform: translateY(0) rotate(-1deg); transform: translateY(0) rotate(-1deg); } 85% { -webkit-transform: translateY(0) rotate(1deg); transform: translateY(0) rotate(1deg); } 95% { -webkit-transform: translateY(0) rotate(-1deg); transform: translateY(0) rotate(-1deg); } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } @-webkit-keyframes slideOutUp { from {} /* Fixes Chrome issue 35.0.1916.114 (easing breaks) */ 100% { -webkit-transform: translateY(-150%); opacity: 0; } } @keyframes slideOutUp { from {} /* Fixes Chrome issue 35.0.1916.114 (easing breaks) */ 100% { -webkit-transform: translateY(-150%); transform: translateY(-150%); opacity: 0; } } @-webkit-keyframes slideInUp { 0% { -webkit-animation-timing-function: ease-in-out; -webkit-transform: translateY(150%); } 50% { -webkit-transform: translateY(0) rotate(-1deg); opacity: 1; } 70% { -webkit-transform: translateY(0) rotate(1deg); } 85% { -webkit-transform: translateY(0) rotate(-1deg); } 95% { -webkit-transform: translateY(0) rotate(1deg); } 100% { -webkit-transform: translateY(0); opacity: 1; } } @keyframes slideInUp { 0% { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-transform: translateY(150%); transform: translateY(150%); } 50% { -webkit-transform: translateY(0) rotate(-1deg); transform: translateY(0) rotate(-1deg); opacity: 1; } 70% { -webkit-transform: translateY(0) rotate(1deg); transform: translateY(0) rotate(1deg); } 85% { -webkit-transform: translateY(0) rotate(-1deg); transform: translateY(0) rotate(-1deg); } 95% { -webkit-transform: translateY(0) rotate(1deg); transform: translateY(0) rotate(1deg); } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } /*****************************************/ /* Slide it */ /*****************************************/ .fxSlideIt li { -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; } .fxSlideIt .navOutNext { -webkit-animation: slideOutLeft 0.5s forwards; animation: slideOutLeft 0.5s forwards; } .fxSlideIt .navInNext { -webkit-animation: rotateSlideInRight 0.6s 0.1s forwards ease-in-out; animation: rotateSlideInRight 0.6s 0.1s forwards ease-in-out; } .fxSlideIt .navOutPrev { -webkit-animation: slideOutRight 0.5s forwards; animation: slideOutRight 0.5s forwards; } .fxSlideIt .navInPrev { -webkit-animation: rotateSlideInLeft 0.6s 0.1s forwards ease-in-out; animation: rotateSlideInLeft 0.6s 0.1s forwards ease-in-out; } @-webkit-keyframes slideOutLeft { from {} /* Fixes Chrome issue 35.0.1916.114 (easing breaks) */ 100% { -webkit-transform: translateX(-400%); opacity: 0; } } @keyframes slideOutLeft { from {} /* Fixes Chrome issue 35.0.1916.114 (easing breaks) */ 100% { -webkit-transform: translateX(-400%); transform: translateX(-400%); opacity: 0; } } @-webkit-keyframes rotateSlideInRight { 0% { -webkit-transform: translateX(100%) rotate(20deg); } 35% { -webkit-transform: rotate(-8deg); } 55% { -webkit-transform: rotate(6deg); } 70% { -webkit-transform: rotate(-4deg); } 85% { -webkit-transform: rotate(2deg); } 95% { -webkit-transform: rotate(-1deg); } 100% { -webkit-transform: translateX(0) rotate(0deg); opacity: 1; } } @keyframes rotateSlideInRight { 0% { -webkit-transform: translateX(100%) rotate(20deg); transform: translateX(100%) rotate(20deg); } 35% { -webkit-transform: rotate(-8deg); transform: rotate(-8deg); } 55% { -webkit-transform: rotate(6deg); transform: rotate(6deg); } 70% { -webkit-transform: rotate(-4deg); transform: rotate(-4deg); } 85% { -webkit-transform: rotate(2deg); transform: rotate(2deg); } 95% { -webkit-transform: rotate(-1deg); transform: rotate(-1deg); } 100% { -webkit-transform: translateX(0) rotate(0deg); transform: translateX(0) rotate(0deg); opacity: 1; } } @-webkit-keyframes slideOutRight { from {} /* Fixes Chrome issue 35.0.1916.114 (easing breaks) */ 100% { -webkit-transform: translateX(400%); opacity: 0; } } @keyframes slideOutRight { from {} /* Fixes Chrome issue 35.0.1916.114 (easing breaks) */ 100% { -webkit-transform: translateX(400%); transform: translateX(400%); opacity: 0; } } @-webkit-keyframes rotateSlideInLeft { 0% { -webkit-transform: translateX(-100%) rotate(-20deg); } 35% { -webkit-transform: rotate(8deg); } 55% { -webkit-transform: rotate(-6deg); } 70% { -webkit-transform: rotate(4deg); } 85% { -webkit-transform: rotate(-2deg); } 95% { -webkit-transform: rotate(1deg); } 100% { -webkit-transform: translateX(0) rotate(0deg); opacity: 1; } } @keyframes rotateSlideInLeft { 0% { -webkit-transform: translateX(-100%) rotate(-20deg); transform: translateX(-100%) rotate(-20deg); } 35% { -webkit-transform: rotate(8deg); transform: rotate(8deg); } 55% { -webkit-transform: rotate(-6deg); transform: rotate(-6deg); } 70% { -webkit-transform: rotate(4deg); transform: rotate(4deg); } 85% { -webkit-transform: rotate(-2deg); transform: rotate(-2deg); } 95% { -webkit-transform: rotate(1deg); transform: rotate(1deg); } 100% { -webkit-transform: translateX(0) rotate(0deg); transform: translateX(0) rotate(0deg); opacity: 1; } } /*****************************************/ /* Bottle kick */ /*****************************************/ .fxBottleKick li { -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; } .fxBottleKick .navOutNext { -webkit-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-animation: rotateBounceOutLeft 1s forwards ease-in-out; animation: rotateBounceOutLeft 1s forwards ease-in-out; } .fxBottleKick .navInNext { -webkit-animation: rotateBounceInRight 1s 0.1s forwards ease-in-out; animation: rotateBounceInRight 1s 0.1s forwards ease-in-out; } .fxBottleKick .navOutPrev { -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-animation: rotateBounceOutRight 1s forwards ease-in-out; animation: rotateBounceOutRight 1s forwards ease-in-out; } .fxBottleKick .navInPrev { -webkit-animation: rotateBounceInLeft 1s 0.1s forwards ease-in-out; animation: rotateBounceInLeft 1s 0.1s forwards ease-in-out; } @-webkit-keyframes rotateBounceOutLeft { from {} /* Fixes Chrome issue 35.0.1916.114 (easing breaks) */ 25% { -webkit-transform: translateX(-100%) rotate(0deg); opacity: 0.9; } 58% { -webkit-transform: translateX(-150%) rotate(-92deg); opacity: 0.9; } 70% { -webkit-transform: translateX(-150%) rotate(-75deg); } 86% { -webkit-transform: translateX(-150%) rotate(-92deg); } 95% { -webkit-transform: translateX(-150%) rotate(-87deg); } 100% { -webkit-transform: translateX(-150%) rotate(-90deg); opacity: 0; } } @keyframes rotateBounceOutLeft { from {} /* Fixes Chrome issue 35.0.1916.114 (easing breaks) */ 25% { -webkit-transform: translateX(-100%) rotate(0deg); transform: translateX(-100%) rotate(0deg); opacity: 0.9; } 58% { -webkit-transform: translateX(-150%) rotate(-92deg); transform: translateX(-150%) rotate(-92deg); opacity: 0.9; } 70% { -webkit-transform: translateX(-150%) rotate(-75deg); transform: translateX(-150%) rotate(-75deg); } 86% { -webkit-transform: translateX(-150%) rotate(-92deg); transform: translateX(-150%) rotate(-92deg); } 95% { -webkit-transform: translateX(-150%) rotate(-87deg); transform: translateX(-150%) rotate(-87deg); } 100% { -webkit-transform: translateX(-150%) rotate(-90deg); transform: translateX(-150%) rotate(-90deg); opacity: 0; } } @-webkit-keyframes rotateBounceInRight { 0% { -webkit-transform: translateX(200%) rotate(20deg); } 25% { -webkit-transform: rotate(-5deg); } 55% { -webkit-transform: translateX(-5%) rotate(3deg); opacity: 1; } 80% { -webkit-transform: rotate(-2deg); } 100% { -webkit-transform: translateX(0) rotate(0deg); opacity: 1; } } @keyframes rotateBounceInRight { 0% { -webkit-transform: translateX(200%) rotate(20deg); transform: translateX(200%) rotate(20deg); } 25% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } 55% { -webkit-transform: translateX(-5%) rotate(3deg); transform: translateX(-5%) rotate(3deg); opacity: 1; } 80% { -webkit-transform: rotate(-2deg); transform: rotate(-2deg); } 100% { -webkit-transform: translateX(0) rotate(0deg); transform: translateX(0) rotate(0deg); opacity: 1; } } @-webkit-keyframes rotateBounceOutRight { from {} /* Fixes Chrome issue 35.0.1916.114 (easing breaks) */ 25% { -webkit-transform: translateX(100%) rotate(0deg); opacity: 0.9; } 58% { -webkit-transform: translateX(150%) rotate(92deg); opacity: 0.9; } 70% { -webkit-transform: translateX(150%) rotate(75deg); } 86% { -webkit-transform: translateX(150%) rotate(92deg); } 95% { -webkit-transform: translateX(150%) rotate(87deg); } 100% { -webkit-transform: translateX(150%) rotate(90deg); opacity: 0; } } @keyframes rotateBounceOutRight { from {} /* Fixes Chrome issue 35.0.1916.114 (easing breaks) */ 25% { -webkit-transform: translateX(100%) rotate(0deg); transform: translateX(100%) rotate(0deg); opacity: 0.9; } 58% { -webkit-transform: translateX(150%) rotate(92deg); transform: translateX(150%) rotate(92deg); opacity: 0.9; } 70% { -webkit-transform: translateX(150%) rotate(75deg); transform: translateX(150%) rotate(75deg); } 86% { -webkit-transform: translateX(150%) rotate(92deg); transform: translateX(150%) rotate(92deg); } 95% { -webkit-transform: translateX(150%) rotate(87deg); transform: translateX(150%) rotate(87deg); } 100% { -webkit-transform: translateX(150%) rotate(90deg); transform: translateX(150%) rotate(90deg); opacity: 0; } } @-webkit-keyframes rotateBounceInLeft { 0% { -webkit-transform: translateX(-200%) rotate(-20deg); } 25% { -webkit-transform: rotate(5deg); } 55% { -webkit-transform: translateX(5%) rotate(-3deg); opacity: 1; } 80% { -webkit-transform: rotate(2deg); } 100% { -webkit-transform: translateX(0) rotate(0deg); opacity: 1; } } @keyframes rotateBounceInLeft { 0% { -webkit-transform: translateX(-200%) rotate(-20deg); transform: translateX(-200%) rotate(-20deg); } 25% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } 55% { -webkit-transform: translateX(5%) rotate(-3deg); transform: translateX(5%) rotate(-3deg); opacity: 1; } 80% { -webkit-transform: rotate(2deg); transform: rotate(2deg); } 100% { -webkit-transform: translateX(0) rotate(0deg); transform: translateX(0) rotate(0deg); opacity: 1; } } /*****************************************/ /* Off the Shelf */ /*****************************************/ .fxShelf li { -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; } .fxShelf .navOutNext { -webkit-animation: addToShelfLeft 0.3s forwards ease-in-out; animation: addToShelfLeft 0.3s forwards ease-in-out; } .fxShelf .navInNext { -webkit-animation: removeFromShelfRight 0.5s forwards ease-in-out; animation: removeFromShelfRight 0.5s forwards ease-in-out; } .fxShelf .navOutPrev { -webkit-animation: addToShelfRight 0.3s forwards ease-in-out; animation: addToShelfRight 0.3s forwards ease-in-out; } .fxShelf .navInPrev { -webkit-animation: removeFromShelfLeft 0.5s forwards ease-in-out; animation: removeFromShelfLeft 0.5s forwards ease-in-out; } @-webkit-keyframes addToShelfLeft { from {} /* Fixes Chrome issue 35.0.1916.114 (easing breaks) */ to { -webkit-transform: translateY(-120%) translateX(-300%) rotate(-90deg); opacity: 0; } } @keyframes addToShelfLeft { from {} /* Fixes Chrome issue 35.0.1916.114 (easing breaks) */ to { -webkit-transform: translateY(-120%) translateX(-300%) rotate(-90deg); transform: translateY(-120%) translateX(-300%) rotate(-90deg); opacity: 0; } } @-webkit-keyframes removeFromShelfRight { 0% { -webkit-transform: translateY(-120%) translateX(300%) rotate(90deg); } 45% { -webkit-transform: translateY(0) translateX(0) rotate(-3deg); opacity: 1; } 65% { -webkit-transform: translateY(0) translateX(0) rotate(2deg); opacity: 1; } 80% { -webkit-transform: translateY(0) translateX(0) rotate(-1deg); opacity: 1; } 95% { -webkit-transform: translateY(0) translateX(0) rotate(1deg); opacity: 1; } 100% { -webkit-transform: translateY(0) translateX(0) rotate(0deg); opacity: 1; } } @keyframes removeFromShelfRight { 0% { -webkit-transform: translateY(-120%) translateX(300%) rotate(90deg); transform: translateY(-120%) translateX(300%) rotate(90deg); } 45% { -webkit-transform: translateY(0) translateX(0) rotate(-3deg); transform: translateY(0) translateX(0) rotate(-3deg); opacity: 1; } 65% { -webkit-transform: translateY(0) translateX(0) rotate(2deg); transform: translateY(0) translateX(0) rotate(2deg); opacity: 1; } 80% { -webkit-transform: translateY(0) translateX(0) rotate(-1deg); transform: translateY(0) translateX(0) rotate(-1deg); opacity: 1; } 95% { -webkit-transform: translateY(0) translateX(0) rotate(1deg); transform: translateY(0) translateX(0) rotate(1deg); opacity: 1; } 100% { -webkit-transform: translateY(0) translateX(0) rotate(0deg); transform: translateY(0) translateX(0) rotate(0deg); opacity: 1; } } @-webkit-keyframes addToShelfRight { from {} /* Fixes Chrome issue 35.0.1916.114 (easing breaks) */ to { -webkit-transform: translateY(-120%) translateX(300%) rotate(90deg); opacity: 0; } } @keyframes addToShelfRight { from {} /* Fixes Chrome issue 35.0.1916.114 (easing breaks) */ to { -webkit-transform: translateY(-120%) translateX(300%) rotate(90deg); transform: translateY(-120%) translateX(300%) rotate(90deg); opacity: 0; } } @-webkit-keyframes removeFromShelfLeft { 0% { -webkit-transform: translateY(-120%) translateX(-300%) rotate(-90deg); } 45% { -webkit-transform: translateY(0) translateX(0) rotate(3deg); opacity: 1; } 65% { -webkit-transform: translateY(0) translateX(0) rotate(-2deg); opacity: 1; } 80% { -webkit-transform: translateY(0) translateX(0) rotate(1deg); opacity: 1; } 95% { -webkit-transform: translateY(0) translateX(0) rotate(-1deg); opacity: 1; } 100% { -webkit-transform: translateY(0) translateX(0) rotate(0deg); opacity: 1; } } @keyframes removeFromShelfLeft { 0% { -webkit-transform: translateY(-120%) translateX(-300%) rotate(-90deg); transform: translateY(-120%) translateX(-300%) rotate(-90deg); } 45% { -webkit-transform: translateY(0) translateX(0) rotate(3deg); transform: translateY(0) translateX(0) rotate(3deg); opacity: 1; } 65% { -webkit-transform: translateY(0) translateX(0) rotate(-2deg); transform: translateY(0) translateX(0) rotate(-2deg); opacity: 1; } 80% { -webkit-transform: translateY(0) translateX(0) rotate(1deg); transform: translateY(0) translateX(0) rotate(1deg); opacity: 1; } 95% { -webkit-transform: translateY(0) translateX(0) rotate(-1deg); transform: translateY(0) translateX(0) rotate(-1deg); opacity: 1; } 100% { -webkit-transform: translateY(0) translateX(0) rotate(0deg); transform: translateY(0) translateX(0) rotate(0deg); opacity: 1; } }