@-webkit-keyframes fadeBottom { 0% { opacity: 0; -webkit-transform: translateY(10%); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes fadeBottom { 0% { opacity: 0; -moz-transform: translateY(10%); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-o-keyframes fadeBottom { 0% { opacity: 0; -o-transform: translateY(10%); } 100% { opacity: 1; -o-transform: translateY(0); } } @keyframes fadeBottom { 0% { opacity: 0; transform: translateY(10%); } 100% { opacity: 1; transform: translateY(0); } } @-webkit-keyframes fadeLeft { 0% { opacity: 0; -webkit-transform: translateX(-10%); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes fadeLeft { 0% { opacity: 0; -moz-transform: translateX(-10%); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-o-keyframes fadeLeft { 0% { opacity: 0; -o-transform: translateX(-10%); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes fadeLeft { 0% { opacity: 0; transform: translateX(-10%); } 100% { opacity: 1; transform: translateX(0); } } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-100%); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes fadeInLeft { 0% { opacity: 0; -moz-transform: translateX(-100%); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-o-keyframes fadeInLeft { 0% { opacity: 0; -o-transform: translateX(-100%); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes fadeInLeft { 0% { opacity: 0; transform: translateX(-100%); } 100% { opacity: 1; transform: translateX(0); } } @-webkit-keyframes fadeRight { 0% { opacity: 0; -webkit-transform: translateX(10%); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes fadeRight { 0% { opacity: 0; -moz-transform: translateX(10%); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-o-keyframes fadeRight { 0% { opacity: 0; -o-transform: translateX(10%); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes fadeRight { 0% { opacity: 0; transform: translateX(10%); } 100% { opacity: 1; transform: translateX(0); } } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(100%); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes fadeInRight { 0% { opacity: 0; -moz-transform: translateX(100%); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-o-keyframes fadeInRight { 0% { opacity: 0; -o-transform: translateX(100%); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes fadeInRight { 0% { opacity: 0; transform: translateX(100%); } 100% { opacity: 1; transform: translateX(0); } } @-webkit-keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(100%); } } @-moz-keyframes fadeOutRight { 0% { opacity: 1; -moz-transform: translateX(0); } 100% { opacity: 0; -moz-transform: translateX(100%); } } @-o-keyframes fadeOutRight { 0% { opacity: 1; -o-transform: translateX(0); } 100% { opacity: 0; -o-transform: translateX(100%); } } @keyframes fadeOutRight { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(100%); } } @-webkit-keyframes fadeInTop { 0% { opacity: 0; -webkit-transform: translatey(-60%); } 100% { opacity: 1; -webkit-transform: translatey(0); } } @-moz-keyframes fadeInTop { 0% { opacity: 0; -moz-transform: translatey(-60%); } 100% { opacity: 1; -moz-transform: translatey(0); } } @-o-keyframes fadeInTop { 0% { opacity: 0; -o-transform: translatey(-60%); } 100% { opacity: 1; -o-transform: translatey(0); } } @keyframes fadeInTop { 0% { opacity: 0; transform: translatey(-60%); } 100% { opacity: 1; transform: translatey(0); } } @-webkit-keyframes fadeOutTop { 0% { opacity: 1; -webkit-transform: translatey(0); } 100% { opacity: 0; -webkit-transform: translatey(-60%); } } @-moz-keyframes fadeOutTop { 0% { opacity: 1; -moz-transform: translatey(0); } 100% { opacity: 0; -moz-transform: translatey(-60%); } } @-o-keyframes fadeOutTop { 0% { opacity: 1; -o-transform: translatey(0); } 100% { opacity: 0; -o-transform: translatey(-60%); } } @keyframes fadeOutTop { 0% { opacity: 1; transform: translatey(0); } 100% { opacity: 0; transform: translatey(-60%); } } @-webkit-keyframes fadeInBottom { 0% { opacity: 0; -webkit-transform: translatey(60%); } 100% { opacity: 1; -webkit-transform: translatey(0); } } @-moz-keyframes fadeInBottom { 0% { opacity: 0; -moz-transform: translatey(60%); } 100% { opacity: 1; -moz-transform: translatey(0); } } @-o-keyframes fadeInBottom { 0% { opacity: 0; -o-transform: translatey(60%); } 100% { opacity: 1; -o-transform: translatey(0); } } @keyframes fadeInBottom { 0% { opacity: 0; transform: translatey(60%); } 100% { opacity: 1; transform: translatey(0); } } @-webkit-keyframes fadeOutBottom { 0% { opacity: 1; -webkit-transform: translatey(0); } 100% { opacity: 0; -webkit-transform: translatey(60%); } } @-moz-keyframes fadeOutBottom { 0% { opacity: 1; -moz-transform: translatey(0); } 100% { opacity: 0; -moz-transform: translatey(60%); } } @-o-keyframes fadeOutBottom { 0% { opacity: 1; -o-transform: translatey(0); } 100% { opacity: 0; -o-transform: translatey(60%); } } @keyframes fadeOutBottom { 0% { opacity: 1; transform: translatey(0); } 100% { opacity: 0; transform: translatey(60%); } } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-70%); } } @-moz-keyframes fadeOutLeft { 0% { opacity: 1; -moz-transform: translateX(0); } 100% { opacity: 0; -moz-transform: translateX(-70%); } } @-o-keyframes fadeOutLeft { 0% { opacity: 1; -o-transform: translateX(0); } 100% { opacity: 0; -o-transform: translateX(-70%); } } @keyframes fadeOutLeft { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-70%); } } @-webkit-keyframes fadeTop { 0% { opacity: 0; -webkit-transform: translateY(-10%); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes fadeTop { 0% { opacity: 0; -moz-transform: translateY(-10%); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-o-keyframes fadeTop { 0% { opacity: 0; -o-transform: translateY(-10%); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes fadeTop { 0% { opacity: 0; transform: translateY(-10%); } 100% { opacity: 1; transform: translateX(0); } } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(100%); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes fadeInRight { 0% { opacity: 0; -moz-transform: translateX(100%); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-o-keyframes fadeInRight { 0% { opacity: 0; -o-transform: translateX(100%); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes fadeInRight { 0% { opacity: 0; transform: translateX(100%); } 100% { opacity: 1; transform: translateX(0); } } @-webkit-keyframes Grow { 0% { opacity: 0; -webkit-transform: scale(1, 0.5); } 100% { opacity: 1; -webkit-transform: scale(1, 1); } } @-moz-keyframes Grow { 0% { opacity: 0; -moz-transform: scale(1, 0.5); } 100% { opacity: 1; -moz-transform: scale(1, 1); } } @-o-keyframes Grow { 0% { opacity: 0; -o-transform: scale(1, 0.5); } 100% { opacity: 1; -o-transform: scale(1, 1); } } @keyframes Grow { 0% { opacity: 0; transform: scale(1, 0.5); } 100% { opacity: 1; transform: scale(1, 1); } } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes slideWidth { 0% { width: 0; } } @-moz-keyframes slideWidth { 0% { width: 0; } } @-o-keyframes slideWidth { 0% { width: 0; } } @keyframes slideWidth { 0% { width: 0; } } @-webkit-keyframes gridFadeIn { 0% { opacity: 0; -webkit-transform: translatey(-5%); } 100% { opacity: 1; -webkit-transform: translatey(0); } } @-moz-keyframes gridFadeIn { 0% { opacity: 0; -moz-transform: translatey(-5%); } 100% { opacity: 1; -moz-transform: translatey(0); } } @-o-keyframes gridFadeIn { 0% { opacity: 0; -o-transform: translatey(-5%); } 100% { opacity: 1; -o-transform: translatey(0); } } @keyframes gridFadeIn { 0% { opacity: 0; transform: translatey(-5%); } 100% { opacity: 1; transform: translatey(0); } } @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); } } @-webkit-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); } }