@-webkit-keyframes swing-in-right-fwd { 0% { -webkit-transform: rotateY(-100deg); transform: rotateY(-100deg); -webkit-transform-origin: right; transform-origin: right; opacity: 0; } 100% { -webkit-transform: rotateY(0); transform: rotateY(0); -webkit-transform-origin: right; transform-origin: right; opacity: 1; } } @keyframes swing-in-right-fwd { 0% { -webkit-transform: rotateY(-100deg); transform: rotateY(-100deg); -webkit-transform-origin: right; transform-origin: right; opacity: 0; } 100% { -webkit-transform: rotateY(0); transform: rotateY(0); -webkit-transform-origin: right; transform-origin: right; opacity: 1; } } .swing-in-right-fwd { -webkit-animation: swing-in-right-fwd cubic-bezier(0.680, -0.550, 0.265, 1.550) both; -webkit-animation-duration: 0.5s !important; animation: swing-in-right-fwd cubic-bezier(0.680, -0.550, 0.265, 1.550) both; animation-duration: 0.5s !important; } @-webkit-keyframes swing-out-left-bck { 0% { -webkit-transform: rotateY(0); transform: rotateY(0); -webkit-transform-origin: left; transform-origin: left; opacity: 1; } 100% { -webkit-transform: rotateY(100deg); transform: rotateY(100deg); -webkit-transform-origin: left; transform-origin: left; opacity: 0; } } @keyframes swing-out-left-bck { 0% { -webkit-transform: rotateY(0); transform: rotateY(0); -webkit-transform-origin: left; transform-origin: left; opacity: 1; } 100% { -webkit-transform: rotateY(100deg); transform: rotateY(100deg); -webkit-transform-origin: left; transform-origin: left; opacity: 0; } } .swing-out-left-bck { -webkit-animation: swing-out-left-bck cubic-bezier(0.680, -0.550, 0.265, 1.550) both; -webkit-animation-duration: 0.6s !important; animation: swing-out-left-bck cubic-bezier(0.680, -0.550, 0.265, 1.550) both; animation-duration: 0.6s !important; } @-webkit-keyframes swing-out-right-bck { 0% { -webkit-transform: rotateY(0); transform: rotateY(0); -webkit-transform-origin: right; transform-origin: right; opacity: 1; } 100% { -webkit-transform: rotateY(-100deg); transform: rotateY(-100deg); -webkit-transform-origin: right; transform-origin: right; opacity: 0; } } @keyframes swing-out-right-bck { 0% { -webkit-transform: rotateY(0); transform: rotateY(0); -webkit-transform-origin: right; transform-origin: right; opacity: 1; } 100% { -webkit-transform: rotateY(-100deg); transform: rotateY(-100deg); -webkit-transform-origin: right; transform-origin: right; opacity: 0; } } .swing-out-right-bck { -webkit-animation: swing-out-right-bck cubic-bezier(0.680, -0.550, 0.265, 1.550) both; -webkit-animation-duration: 0.6s !important; animation: swing-out-right-bck cubic-bezier(0.680, -0.550, 0.265, 1.550) both; animation-duration: 0.6s !important; } @-webkit-keyframes swing-in-left-fwd { 0% { -webkit-transform: rotateY(100deg); transform: rotateY(100deg); -webkit-transform-origin: left; transform-origin: left; opacity: 0; } 100% { -webkit-transform: rotateY(0); transform: rotateY(0); -webkit-transform-origin: left; transform-origin: left; opacity: 1; } } @keyframes swing-in-left-fwd { 0% { -webkit-transform: rotateY(100deg); transform: rotateY(100deg); -webkit-transform-origin: left; transform-origin: left; opacity: 0; } 100% { -webkit-transform: rotateY(0); transform: rotateY(0); -webkit-transform-origin: left; transform-origin: left; opacity: 1; } } .swing-in-left-fwd { -webkit-animation: swing-in-left-fwd cubic-bezier(0.175, 0.885, 0.320, 1.275) both; -webkit-animation-duration: 0.5s !important; animation: swing-in-left-fwd cubic-bezier(0.175, 0.885, 0.320, 1.275) both; animation-duration: 0.5s !important; }