/* ---------------------- Stylesheet Guide ------------------------- slideTop slideBottom slideLeft slideRight zoomOut zoomIn bounceInUp bounceInRight bounceInDown bounceInLeft pageRight pageRightBack pageLeft pageLeftBack pageBottomBack pageTopBack tinDown tinUp tinRight tinLeft */ /* ================= slideTop ================== */ .slideTop { opacity: 0; position: relative; -webkit-animation: slideTop 1s ease both; -webkit-animation-play-state: paused; -moz-animation: slideTop 1s ease both; -moz-animation-play-state: paused; -o-animation: slideTop 1s ease both; -o-animation-play-state: paused; animation: slideTop 1s ease both; animation-play-state: paused; -webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running; } @-webkit-keyframes slideTop { 0% { opacity: 0; top: -40px; } 100% { opacity: 1; top: 0; } } @-moz-keyframes slideTop { 0% { opacity: 0; top: -40px; } 100% { opacity: 1; top: 0; } } @-o-keyframes slideTop { 0% { opacity: 0; top: -40px; } 100% { opacity: 1; top: 0; } } @keyframes slideTop { 0% { opacity: 0; top: -40px; } 100% { opacity: 1; top: 0; } } /* ================= slideBottom ================== */ .slideBottom { opacity: 0; position: relative; -webkit-animation: slideBottom 1000ms ease both; -webkit-animation-play-state: paused; -moz-animation: slideBottom 1000ms ease both; -moz-animation-play-state: paused; -o-animation: slideBottom 1000ms ease both; -o-animation-play-state: paused; animation: slideBottom 1000ms ease both; animation-play-state: paused; -webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running; } @-webkit-keyframes slideBottom { 0% { opacity: 0; top: 30px; } 100% { opacity: 1; top: 0; } } @-moz-keyframes slideBottom { 0% { opacity: 0; top: 30px; } 100% { opacity: 1; top: 0; } } @-o-keyframes slideBottom { 0% { opacity: 0; top: 30px; } 100% { opacity: 1; top: 0; } } @keyframes slideBottom { 0% { opacity: 0; top: 30px; } 100% { opacity: 1; top: 0; } } /* ================= slideLeft ================== */ .slideLeft { opacity: 0; position: relative; -webkit-animation: slideLeft 1000ms ease both; -webkit-animation-play-state: paused; -moz-animation: slideLeft 1000ms ease both; -moz-animation-play-state: paused; -o-animation: slideLeft 1000ms ease both; -o-animation-play-state: paused; animation: slideLeft 1000ms ease both; animation-play-state: paused; -webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running; } @-webkit-keyframes slideLeft { 0% { opacity: 0; left: -30px; } 100% { opacity: 1; left: 0; } } @-moz-keyframes slideLeft { 0% { opacity: 0; left: -30px; } 100% { opacity: 1; left: 0; } } @-o-keyframes slideLeft { 0% { opacity: 0; left: -30px; } 100% { opacity: 1; left: 0; } } @keyframes slideLeft { 0% { opacity: 0; left: -30px; } 100% { opacity: 1; left: 0; } } /* ================= slideRight ================== */ .slideRight { opacity: 0; position: relative; -webkit-animation: slideRight 1000ms ease both; -webkit-animation-play-state: paused; -moz-animation: slideRight 1000ms ease both; -moz-animation-play-state: paused; -o-animation: slideRight 1000ms ease both; -o-animation-play-state: paused; animation: slideRight 1000ms ease both; animation-play-state: paused; -webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running; } @-webkit-keyframes slideRight { 0% { opacity: 0; left: 30px; } 100% { opacity: 1; left: 0; } } @-moz-keyframes slideRight { 0% { opacity: 0; left: 30px; } 100% { opacity: 1; left: 0; } } @-o-keyframes slideRight { 0% { opacity: 0; left: 30px; } 100% { opacity: 1; left: 0; } } @keyframes slideRight { 0% { opacity: 0; left: 30px; } 100% { opacity: 1; left: 0; } } /* ================= zoomOut ================== */ .zoomOut { opacity: 0; position: relative; -webkit-animation: zoomOut 1000ms ease both; -webkit-animation-play-state: paused; -moz-animation: zoomOut 1000ms ease both; -moz-animation-play-state: paused; -o-animation: zoomOut 1000ms ease both; -o-animation-play-state: paused; animation: zoomOut 1000ms ease both; animation-play-state: paused; -webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running; } @-webkit-keyframes zoomOut { 0% { opacity: 0; -webkit-transform: scale(.6); } 100% { opacity: 1; -webkit-transform: scale(1); } } @-moz-keyframes zoomOut { 0% { opacity: 0; -moz-transform: scale(.6); } 100% { opacity: 1; -moz-transform: scale(1); } } @-o-keyframes zoomOut { 0% { opacity: 0; -o-transform: scale(.6); } 100% { opacity: 1; -o-transform: scale(1); } } @keyframes zoomOut { 0% { opacity: 0; transform: scale(.6); } 100% { opacity: 1; transform: scale(1); } } /* ================= zoomIn ================== */ .zoomIn { opacity: 0; position: relative; -webkit-animation: zoomIn 1000ms ease both; -webkit-animation-play-state: paused; -moz-animation: zoomIn 1000ms ease both; -moz-animation-play-state: paused; -o-animation: zoomIn 1000ms ease both; -o-animation-play-state: paused; animation: zoomIn 1000ms ease both; animation-play-state: paused; -webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running; } @-webkit-keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale(1.8); } 100% { opacity: 1; -webkit-transform: scale(1); } } @-moz-keyframes zoomIn { 0% { opacity: 0; -moz-transform: scale(1.8); } 100% { opacity: 1; -moz-transform: scale(1); } } @-o-keyframes zoomIn { 0% { opacity: 0; -o-transform: scale(1.8); } 100% { opacity: 1; -o-transform: scale(1); } } @keyframes zoomIn { 0% { opacity: 0; transform: scale(1.8); } 100% { opacity: 1; transform: scale(1); } } /* ================= bounceInUp ================== */ .bounceInUp { opacity: 0; position: relative; -webkit-animation: bounceInUp 800ms ease both; -webkit-animation-play-state: paused; -moz-animation: bounceInUp 800ms ease both; -moz-animation-play-state: paused; -o-animation: bounceInUp 800ms ease both; -o-animation-play-state: paused; animation: bounceInUp 800ms ease both; animation-play-state: paused; -webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running; } @-webkit-keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); } 60% { -webkit-transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes bounceInUp { 0% { opacity: 0; -moz-transform: translateY(2000px); } 60% { -moz-transform: translateY(-30px); } 80% { -moz-transform: translateY(10px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-o-keyframes bounceInUp { 0% { opacity: 0; -o-transform: translateY(2000px); } 60% { -o-transform: translateY(-30px); } 80% { -o-transform: translateY(10px); } 100% { opacity: 1; -o-transform: translateY(0); } } @keyframes bounceInUp { 0% { opacity: 0; transform: translateY(2000px); } 60% { transform: translateY(-30px); } 80% { transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } } /* ================= bounceInRight ================== */ .bounceInRight { opacity: 0; position: relative; -webkit-animation: bounceInRight 800ms ease both; -webkit-animation-play-state: paused; -moz-animation: bounceInRight 800ms ease both; -moz-animation-play-state: paused; -o-animation: bounceInRight 800ms ease both; -o-animation-play-state: paused; animation: bounceInRight 800ms ease both; animation-play-state: paused; -webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running; } @-webkit-keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); } 60% { -webkit-transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes bounceInRight { 0% { opacity: 0; -moz-transform: translateX(2000px); } 60% { -moz-transform: translateX(-30px); } 80% { -moz-transform: translateX(10px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-moz-keyframes bounceInRight { 0% { opacity: 0; -o-transform: translateX(2000px); } 60% { -o-transform: translateX(-30px); } 80% { -o-transform: translateX(10px); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes bounceInRight { 0% { opacity: 0; transform: translateX(2000px); } 60% { transform: translateX(-30px); } 80% { transform: translateX(10px); } 100% { opacity: 1; transform: translateX(0); } } /* ================= bounceInDown ================== */ .bounceInDown { opacity: 0; position: relative; -webkit-animation: bounceInDown 800ms ease both; -webkit-animation-play-state: paused; -moz-animation: bounceInDown 800ms ease both; -moz-animation-play-state: paused; -o-animation: bounceInDown 800ms ease both; -o-animation-play-state: paused; animation: bounceInDown 800ms ease both; animation-play-state: paused; -webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running; } @-webkit-keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); } 60% { -webkit-transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes bounceInDown { 0% { opacity: 0; -moz-transform: translateY(-2000px); } 60% { -moz-transform: translateY(30px); } 80% { -moz-transform: translateY(-10px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-o-keyframes bounceInDown { 0% { opacity: 0; -o-transform: translateY(-2000px); } 60% { -o-transform: translateY(30px); } 80% { -o-transform: translateY(-10px); } 100% { opacity: 1; -o-transform: translateY(0); } } @keyframes bounceInDown { 0% { opacity: 0; transform: translateY(-2000px); } 60% { transform: translateY(30px); } 80% { transform: translateY(-10px); } 100% { opacity: 1; transform: translateY(0); } } /* ================= bounceInLeft ================== */ .bounceInLeft { opacity: 0; position: relative; -webkit-animation: bounceInLeft 800ms ease both; -webkit-animation-play-state: paused; -moz-animation: bounceInLeft 800ms ease both; -moz-animation-play-state: paused; -o-animation: bounceInLeft 800ms ease both; -o-animation-play-state: paused; animation: bounceInLeft 800ms ease both; animation-play-state: paused; -webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running; } @-webkit-keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); } 60% { -webkit-transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes bounceInLeft { 0% { opacity: 0; -moz-transform: translateX(-2000px); } 60% { -moz-transform: translateX(30px); } 80% { -moz-transform: translateX(-10px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-o-keyframes bounceInLeft { 0% { opacity: 0; -o-transform: translateX(-2000px); } 60% { -o-transform: translateX(30px); } 80% { -o-transform: translateX(-10px); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes bounceInLeft { 0% { opacity: 0; transform: translateX(-2000px); } 60% { transform: translateX(30px); } 80% { transform: translateX(-10px); } 100% { opacity: 1; transform: translateX(0); } } /* ================= pageRight ================== */ .pageRight { opacity: 0; position: relative; -webkit-animation: pageRight 800ms ease both; -webkit-animation-play-state: paused; -webkit-transform-origin: 100% 50%; -moz-animation: pageRight 800ms ease both; -moz-animation-play-state: paused; -moz-transform-origin: 100% 50%; -o-animation: pageRight 800ms ease both; -o-animation-play-state: paused; -o-transform-origin: 100% 50%; animation: pageRight 800ms ease both; animation-play-state: paused; transform-origin: 100% 50%; -webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running; } @-webkit-keyframes pageRight { 0% { opacity: 0; -webkit-transform: perspective(400px) rotateY(90deg); } 100% { opacity: 1; -webkit-transform: perspective(400px) rotateY(0deg); } } @-moz-keyframes pageRight { 0% { opacity: 0; -moz-transform: perspective(400px) rotateY(90deg); } 100% { opacity: 1; -moz-transform: perspective(400px) rotateY(0deg); } } @-o-keyframes pageRight { 0% { opacity: 0; -o-transform: perspective(400px) rotateY(90deg); } 100% { opacity: 1; -o-transform: perspective(400px) rotateY(0deg); } } @keyframes pageRight { 0% { opacity: 0; transform: perspective(400px) rotateY(90deg); } 100% { opacity: 1; transform: perspective(400px) rotateY(0deg); } } /* ================= pageRightBack ================== */ .pageRightBack { opacity: 0; position: relative; -webkit-animation: pageRightBack 800ms ease both; -webkit-animation-play-state: paused; -webkit-transform-origin: 100% 50%; -moz-animation: pageRightBack 800ms ease both; -moz-animation-play-state: paused; -moz-transform-origin: 100% 50%; -o-animation: pageRightBack 800ms ease both; -o-animation-play-state: paused; -o-transform-origin: 100% 50%; animation: pageRightBack 800ms ease both; animation-play-state: paused; transform-origin: 100% 50%; -webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running; } @-webkit-keyframes pageRightBack { 0% { opacity: 0; -webkit-transform: perspective(400px) rotateY(-90deg); } 100% { opacity: 1; -webkit-transform: perspective(400px) rotateY(0deg); } } @-moz-keyframes pageRightBack { 0% { opacity: 0; -moz-transform: perspective(400px) rotateY(-90deg); } 100% { opacity: 1; -moz-transform: perspective(400px) rotateY(0deg); } } @-o-keyframes pageRightBack { 0% { opacity: 0; -o-transform: perspective(400px) rotateY(-90deg); } 100% { opacity: 1; -o-transform: perspective(400px) rotateY(0deg); } } @keyframes pageRightBack { 0% { opacity: 0; transform: perspective(400px) rotateY(-90deg); } 100% { opacity: 1; transform: perspective(400px) rotateY(0deg); } } /* ================= pageLeft ================== */ .pageLeft { opacity: 0; position: relative; -webkit-animation: pageLeft 800ms ease both; -webkit-animation-play-state: paused; -webkit-transform-origin: 0% 50%; -moz-animation: pageLeft 800ms ease both; -moz-animation-play-state: paused; -moz-transform-origin: 0% 50%; -o-animation: pageLeft 800ms ease both; -o-animation-play-state: paused; -o-transform-origin: 0% 50%; animation: pageLeft 800ms ease both; animation-play-state: paused; transform-origin: 0% 50%; -webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running; } @-webkit-keyframes pageLeft { 0% { opacity: 0; -webkit-transform: perspective(400px) rotateY(-90deg); } 100% { opacity: 1; -webkit-transform: perspective(400px) rotateY(0deg); } } @-moz-keyframes pageLeft { 0% { opacity: 0; -moz-transform: perspective(400px) rotateY(-90deg); } 100% { opacity: 1; -moz-transform: perspective(400px) rotateY(0deg); } } @-o-keyframes pageLeft { 0% { opacity: 0; -o-transform: perspective(400px) rotateY(-90deg); } 100% { opacity: 1; -o-transform: perspective(400px) rotateY(0deg); } } @keyframes pageLeft { 0% { opacity: 0; transform: perspective(400px) rotateY(-90deg); } 100% { opacity: 1; transform: perspective(400px) rotateY(0deg); } } /* ================= pageLeftBack ================== */ .pageLeftBack { opacity: 0; position: relative; -webkit-animation: pageLeftBack 800ms ease both; -webkit-animation-play-state: paused; -webkit-transform-origin: 0% 50%; -moz-animation: pageLeftBack 800ms ease both; -moz-animation-play-state: paused; -moz-transform-origin: 0% 50%; -o-animation: pageLeftBack 800ms ease both; -o-animation-play-state: paused; -o-transform-origin: 0% 50%; animation: pageLeftBack 800ms ease both; animation-play-state: paused; transform-origin: 0% 50%; -webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running; } @-webkit-keyframes pageLeftBack { 0% { opacity: 0; -webkit-transform: perspective(400px) rotateY(90deg); } 100% { opacity: 1; -webkit-transform: perspective(400px) rotateY(0deg); } } @-moz-keyframes pageLeftBack { 0% { opacity: 0; -moz-transform: perspective(400px) rotateY(90deg); } 100% { opacity: 1; -moz-transform: perspective(400px) rotateY(0deg); } } @-o-keyframes pageLeftBack { 0% { opacity: 0; -o-transform: perspective(400px) rotateY(90deg); } 100% { opacity: 1; -o-transform: perspective(400px) rotateY(0deg); } } @keyframes pageLeftBack { 0% { opacity: 0; transform: perspective(400px) rotateY(90deg); } 100% { opacity: 1; transform: perspective(400px) rotateY(0deg); } } /* ================= pageBottomBack ================== */ .pageBottomBack { opacity: 0; position: relative; -webkit-animation: pageBottomBack 800ms ease both; -webkit-animation-play-state: paused; -webkit-transform-origin: 50% 100%; -moz-animation: pageBottomBack 800ms ease both; -moz-animation-play-state: paused; -moz-transform-origin: 50% 100%; -o-animation: pageBottomBack 800ms ease both; -o-animation-play-state: paused; -o-transform-origin: 50% 100%; animation: pageBottomBack 800ms ease both; animation-play-state: paused; transform-origin: 50% 100%; -webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running; } @-webkit-keyframes pageBottomBack { 0% { opacity: 0; -webkit-transform: perspective(400px) rotateX(90deg); } 100% { opacity: 1; -webkit-transform: perspective(400px) rotateX(0deg); } } @-moz-keyframes pageBottomBack { 0% { opacity: 0; -moz-transform: perspective(400px) rotateX(90deg); } 100% { opacity: 1; -moz-transform: perspective(400px) rotateX(0deg); } } @-o-keyframes pageBottomBack { 0% { opacity: 0; -o-transform: perspective(400px) rotateX(90deg); } 100% { opacity: 1; -o-transform: perspective(400px) rotateX(0deg); } } @keyframes pageBottomBack { 0% { opacity: 0; transform: perspective(400px) rotateX(90deg); } 100% { opacity: 1; transform: perspective(400px) rotateX(0deg); } } /* ================= pageTopBack ================== */ .pageTopBack { opacity: 0; position: relative; -webkit-animation: pageTopBack 800ms ease both; -webkit-animation-play-state: paused; -webkit-transform-origin: 50% 0%; -moz-animation: pageTopBack 800ms ease both; -moz-animation-play-state: paused; -moz-transform-origin: 50% 0%; -o-animation: pageTopBack 800ms ease both; -o-animation-play-state: paused; -o-transform-origin: 50% 0%; animation: pageTopBack 800ms ease both; animation-play-state: paused; transform-origin: 50% 0%; -webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running; } @-webkit-keyframes pageTopBack { 0% { opacity: 0; -webkit-transform: perspective(400px) rotateX(90deg); } 100% { opacity: 1; -webkit-transform: perspective(400px) rotateX(0deg); } } @-moz-keyframes pageTopBack { 0% { opacity: 0; -moz-transform: perspective(400px) rotateX(90deg); } 100% { opacity: 1; -moz-transform: perspective(400px) rotateX(0deg); } } @-o-keyframes pageTopBack { 0% { opacity: 0; -o-transform: perspective(400px) rotateX(90deg); } 100% { opacity: 1; -o-transform: perspective(400px) rotateX(0deg); } } @keyframes pageTopBack { 0% { opacity: 0; transform: perspective(400px) rotateX(90deg); } 100% { opacity: 1; transform: perspective(400px) rotateX(0deg); } } /* ================= Tin Effects ================== */ .tinDown { -webkit-animation-name: tinDown; -moz-animation-name: tinDown; -ms-animation-name: tinDown; -o-animation-name: tinDown; animation-name: tinDown; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; } .tinUp { -webkit-animation-name: tinUp; -moz-animation-name: tinUp; -ms-animation-name: tinUp; -o-animation-name: tinUp; animation-name: tinUp; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; } .tinLeft { -webkit-animation-name: tinLeft; -moz-animation-name: tinLeft; -ms-animation-name: tinLeft; -o-animation-name: tinLeft; animation-name: tinLeft; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; } .tinRight { -webkit-animation-name: tinRight; -moz-animation-name: tinRight; -ms-animation-name: tinRight; -o-animation-name: tinRight; animation-name: tinDown; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; } @-moz-keyframes tinRight { 0% { opacity: 0; -webkit-transform: scale(1, 1) translateX(900%); -moz-transform: scale(1, 1) translateX(900%); -ms-transform: scale(1, 1) translateX(900%); -o-transform: scale(1, 1) translateX(900%); transform: scale(1, 1) translateX(900%); } 50%, 70%, 90% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateX(0); -moz-transform: scale(1.1, 1.1) translateX(0); -ms-transform: scale(1.1, 1.1) translateX(0); -o-transform: scale(1.1, 1.1) translateX(0); transform: scale(1.1, 1.1) translateX(0); } 60%, 80%, 100% { opacity: 1; -webkit-transform: scale(1, 1) translateX(0); -moz-transform: scale(1, 1) translateX(0); -ms-transform: scale(1, 1) translateX(0); -o-transform: scale(1, 1) translateX(0); transform: scale(1, 1) translateX(0); } } @-webkit-keyframes tinRight { 0% { opacity: 0; -webkit-transform: scale(1, 1) translateX(900%); -moz-transform: scale(1, 1) translateX(900%); -ms-transform: scale(1, 1) translateX(900%); -o-transform: scale(1, 1) translateX(900%); transform: scale(1, 1) translateX(900%); } 50%, 70%, 90% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateX(0); -moz-transform: scale(1.1, 1.1) translateX(0); -ms-transform: scale(1.1, 1.1) translateX(0); -o-transform: scale(1.1, 1.1) translateX(0); transform: scale(1.1, 1.1) translateX(0); } 60%, 80%, 100% { opacity: 1; -webkit-transform: scale(1, 1) translateX(0); -moz-transform: scale(1, 1) translateX(0); -ms-transform: scale(1, 1) translateX(0); -o-transform: scale(1, 1) translateX(0); transform: scale(1, 1) translateX(0); } } @-o-keyframes tinRight { 0% { opacity: 0; -webkit-transform: scale(1, 1) translateX(900%); -moz-transform: scale(1, 1) translateX(900%); -ms-transform: scale(1, 1) translateX(900%); -o-transform: scale(1, 1) translateX(900%); transform: scale(1, 1) translateX(900%); } 50%, 70%, 90% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateX(0); -moz-transform: scale(1.1, 1.1) translateX(0); -ms-transform: scale(1.1, 1.1) translateX(0); -o-transform: scale(1.1, 1.1) translateX(0); transform: scale(1.1, 1.1) translateX(0); } 60%, 80%, 100% { opacity: 1; -webkit-transform: scale(1, 1) translateX(0); -moz-transform: scale(1, 1) translateX(0); -ms-transform: scale(1, 1) translateX(0); -o-transform: scale(1, 1) translateX(0); transform: scale(1, 1) translateX(0); } } @-ms-keyframes tinRight { 0% { opacity: 0; -webkit-transform: scale(1, 1) translateX(900%); -moz-transform: scale(1, 1) translateX(900%); -ms-transform: scale(1, 1) translateX(900%); -o-transform: scale(1, 1) translateX(900%); transform: scale(1, 1) translateX(900%); } 50%, 70%, 90% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateX(0); -moz-transform: scale(1.1, 1.1) translateX(0); -ms-transform: scale(1.1, 1.1) translateX(0); -o-transform: scale(1.1, 1.1) translateX(0); transform: scale(1.1, 1.1) translateX(0); } 60%, 80%, 100% { opacity: 1; -webkit-transform: scale(1, 1) translateX(0); -moz-transform: scale(1, 1) translateX(0); -ms-transform: scale(1, 1) translateX(0); -o-transform: scale(1, 1) translateX(0); transform: scale(1, 1) translateX(0); } } @keyframes tinRight { 0% { opacity: 0; -webkit-transform: scale(1, 1) translateX(900%); -moz-transform: scale(1, 1) translateX(900%); -ms-transform: scale(1, 1) translateX(900%); -o-transform: scale(1, 1) translateX(900%); transform: scale(1, 1) translateX(900%); } 50%, 70%, 90% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateX(0); -moz-transform: scale(1.1, 1.1) translateX(0); -ms-transform: scale(1.1, 1.1) translateX(0); -o-transform: scale(1.1, 1.1) translateX(0); transform: scale(1.1, 1.1) translateX(0); } 60%, 80%, 100% { opacity: 1; -webkit-transform: scale(1, 1) translateX(0); -moz-transform: scale(1, 1) translateX(0); -ms-transform: scale(1, 1) translateX(0); -o-transform: scale(1, 1) translateX(0); transform: scale(1, 1) translateX(0); } } @-moz-keyframes tinLeft { 0% { opacity: 0; -webkit-transform: scale(1, 1) translateX(-900%); -moz-transform: scale(1, 1) translateX(-900%); -ms-transform: scale(1, 1) translateX(-900%); -o-transform: scale(1, 1) translateX(-900%); transform: scale(1, 1) translateX(-900%); } 50%, 70%, 90% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateX(0); -moz-transform: scale(1.1, 1.1) translateX(0); -ms-transform: scale(1.1, 1.1) translateX(0); -o-transform: scale(1.1, 1.1) translateX(0); transform: scale(1.1, 1.1) translateX(0); } 60%, 80%, 100% { opacity: 1; -webkit-transform: scale(1, 1) translateX(0); -moz-transform: scale(1, 1) translateX(0); -ms-transform: scale(1, 1) translateX(0); -o-transform: scale(1, 1) translateX(0); transform: scale(1, 1) translateX(0); } } @-webkit-keyframes tinLeft { 0% { opacity: 0; -webkit-transform: scale(1, 1) translateX(-900%); -moz-transform: scale(1, 1) translateX(-900%); -ms-transform: scale(1, 1) translateX(-900%); -o-transform: scale(1, 1) translateX(-900%); transform: scale(1, 1) translateX(-900%); } 50%, 70%, 90% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateX(0); -moz-transform: scale(1.1, 1.1) translateX(0); -ms-transform: scale(1.1, 1.1) translateX(0); -o-transform: scale(1.1, 1.1) translateX(0); transform: scale(1.1, 1.1) translateX(0); } 60%, 80%, 100% { opacity: 1; -webkit-transform: scale(1, 1) translateX(0); -moz-transform: scale(1, 1) translateX(0); -ms-transform: scale(1, 1) translateX(0); -o-transform: scale(1, 1) translateX(0); transform: scale(1, 1) translateX(0); } } @-o-keyframes tinLeft { 0% { opacity: 0; -webkit-transform: scale(1, 1) translateX(-900%); -moz-transform: scale(1, 1) translateX(-900%); -ms-transform: scale(1, 1) translateX(-900%); -o-transform: scale(1, 1) translateX(-900%); transform: scale(1, 1) translateX(-900%); } 50%, 70%, 90% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateX(0); -moz-transform: scale(1.1, 1.1) translateX(0); -ms-transform: scale(1.1, 1.1) translateX(0); -o-transform: scale(1.1, 1.1) translateX(0); transform: scale(1.1, 1.1) translateX(0); } 60%, 80%, 100% { opacity: 1; -webkit-transform: scale(1, 1) translateX(0); -moz-transform: scale(1, 1) translateX(0); -ms-transform: scale(1, 1) translateX(0); -o-transform: scale(1, 1) translateX(0); transform: scale(1, 1) translateX(0); } } @-ms-keyframes tinLeft { 0% { opacity: 0; -webkit-transform: scale(1, 1) translateX(-900%); -moz-transform: scale(1, 1) translateX(-900%); -ms-transform: scale(1, 1) translateX(-900%); -o-transform: scale(1, 1) translateX(-900%); transform: scale(1, 1) translateX(-900%); } 50%, 70%, 90% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateX(0); -moz-transform: scale(1.1, 1.1) translateX(0); -ms-transform: scale(1.1, 1.1) translateX(0); -o-transform: scale(1.1, 1.1) translateX(0); transform: scale(1.1, 1.1) translateX(0); } 60%, 80%, 100% { opacity: 1; -webkit-transform: scale(1, 1) translateX(0); -moz-transform: scale(1, 1) translateX(0); -ms-transform: scale(1, 1) translateX(0); -o-transform: scale(1, 1) translateX(0); transform: scale(1, 1) translateX(0); } } @keyframes tinLeft { 0% { opacity: 0; -webkit-transform: scale(1, 1) translateX(-900%); -moz-transform: scale(1, 1) translateX(-900%); -ms-transform: scale(1, 1) translateX(-900%); -o-transform: scale(1, 1) translateX(-900%); transform: scale(1, 1) translateX(-900%); } 50%, 70%, 90% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateX(0); -moz-transform: scale(1.1, 1.1) translateX(0); -ms-transform: scale(1.1, 1.1) translateX(0); -o-transform: scale(1.1, 1.1) translateX(0); transform: scale(1.1, 1.1) translateX(0); } 60%, 80%, 100% { opacity: 1; -webkit-transform: scale(1, 1) translateX(0); -moz-transform: scale(1, 1) translateX(0); -ms-transform: scale(1, 1) translateX(0); -o-transform: scale(1, 1) translateX(0); transform: scale(1, 1) translateX(0); } } @-moz-keyframes tinUp { 0% { opacity: 0; -webkit-transform: scale(1, 1) translateY(-900%); -moz-transform: scale(1, 1) translateY(-900%); -ms-transform: scale(1, 1) translateY(-900%); -o-transform: scale(1, 1) translateY(-900%); transform: scale(1, 1) translateY(-900%); } 50%, 70%, 90% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateY(0); -moz-transform: scale(1.1, 1.1) translateY(0); -ms-transform: scale(1.1, 1.1) translateY(0); -o-transform: scale(1.1, 1.1) translateY(0); transform: scale(1.1, 1.1) translateY(0); } 60%, 80%, 100% { opacity: 1; -webkit-transform: scale(1, 1) translateY(0); -moz-transform: scale(1, 1) translateY(0); -ms-transform: scale(1, 1) translateY(0); -o-transform: scale(1, 1) translateY(0); transform: scale(1, 1) translateY(0); } } @-webkit-keyframes tinUp { 0% { opacity: 0; -webkit-transform: scale(1, 1) translateY(-900%); -moz-transform: scale(1, 1) translateY(-900%); -ms-transform: scale(1, 1) translateY(-900%); -o-transform: scale(1, 1) translateY(-900%); transform: scale(1, 1) translateY(-900%); } 50%, 70%, 90% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateY(0); -moz-transform: scale(1.1, 1.1) translateY(0); -ms-transform: scale(1.1, 1.1) translateY(0); -o-transform: scale(1.1, 1.1) translateY(0); transform: scale(1.1, 1.1) translateY(0); } 60%, 80%, 100% { opacity: 1; -webkit-transform: scale(1, 1) translateY(0); -moz-transform: scale(1, 1) translateY(0); -ms-transform: scale(1, 1) translateY(0); -o-transform: scale(1, 1) translateY(0); transform: scale(1, 1) translateY(0); } } @-o-keyframes tinUp { 0% { opacity: 0; -webkit-transform: scale(1, 1) translateY(-900%); -moz-transform: scale(1, 1) translateY(-900%); -ms-transform: scale(1, 1) translateY(-900%); -o-transform: scale(1, 1) translateY(-900%); transform: scale(1, 1) translateY(-900%); } 50%, 70%, 90% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateY(0); -moz-transform: scale(1.1, 1.1) translateY(0); -ms-transform: scale(1.1, 1.1) translateY(0); -o-transform: scale(1.1, 1.1) translateY(0); transform: scale(1.1, 1.1) translateY(0); } 60%, 80%, 100% { opacity: 1; -webkit-transform: scale(1, 1) translateY(0); -moz-transform: scale(1, 1) translateY(0); -ms-transform: scale(1, 1) translateY(0); -o-transform: scale(1, 1) translateY(0); transform: scale(1, 1) translateY(0); } } @-ms-keyframes tinUp { 0% { opacity: 0; -webkit-transform: scale(1, 1) translateY(-900%); -moz-transform: scale(1, 1) translateY(-900%); -ms-transform: scale(1, 1) translateY(-900%); -o-transform: scale(1, 1) translateY(-900%); transform: scale(1, 1) translateY(-900%); } 50%, 70%, 90% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateY(0); -moz-transform: scale(1.1, 1.1) translateY(0); -ms-transform: scale(1.1, 1.1) translateY(0); -o-transform: scale(1.1, 1.1) translateY(0); transform: scale(1.1, 1.1) translateY(0); } 60%, 80%, 100% { opacity: 1; -webkit-transform: scale(1, 1) translateY(0); -moz-transform: scale(1, 1) translateY(0); -ms-transform: scale(1, 1) translateY(0); -o-transform: scale(1, 1) translateY(0); transform: scale(1, 1) translateY(0); } } @keyframes tinUp { 0% { opacity: 0; -webkit-transform: scale(1, 1) translateY(-900%); -moz-transform: scale(1, 1) translateY(-900%); -ms-transform: scale(1, 1) translateY(-900%); -o-transform: scale(1, 1) translateY(-900%); transform: scale(1, 1) translateY(-900%); } 50%, 70%, 90% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateY(0); -moz-transform: scale(1.1, 1.1) translateY(0); -ms-transform: scale(1.1, 1.1) translateY(0); -o-transform: scale(1.1, 1.1) translateY(0); transform: scale(1.1, 1.1) translateY(0); } 60%, 80%, 100% { opacity: 1; -webkit-transform: scale(1, 1) translateY(0); -moz-transform: scale(1, 1) translateY(0); -ms-transform: scale(1, 1) translateY(0); -o-transform: scale(1, 1) translateY(0); transform: scale(1, 1) translateY(0); } } @-moz-keyframes tinDown { 0% { opacity: 0; -webkit-transform: scale(1, 1) translateY(900%); -moz-transform: scale(1, 1) translateY(900%); -ms-transform: scale(1, 1) translateY(900%); -o-transform: scale(1, 1) translateY(900%); transform: scale(1, 1) translateY(900%); } 50%, 70%, 90% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateY(0); -moz-transform: scale(1.1, 1.1) translateY(0); -ms-transform: scale(1.1, 1.1) translateY(0); -o-transform: scale(1.1, 1.1) translateY(0); transform: scale(1.1, 1.1) translateY(0); } 60%, 80%, 100% { opacity: 1; -webkit-transform: scale(1, 1) translateY(0); -moz-transform: scale(1, 1) translateY(0); -ms-transform: scale(1, 1) translateY(0); -o-transform: scale(1, 1) translateY(0); transform: scale(1, 1) translateY(0); } } @-webkit-keyframes tinDown { 0% { opacity: 0; -webkit-transform: scale(1, 1) translateY(900%); -moz-transform: scale(1, 1) translateY(900%); -ms-transform: scale(1, 1) translateY(900%); -o-transform: scale(1, 1) translateY(900%); transform: scale(1, 1) translateY(900%); } 50%, 70%, 90% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateY(0); -moz-transform: scale(1.1, 1.1) translateY(0); -ms-transform: scale(1.1, 1.1) translateY(0); -o-transform: scale(1.1, 1.1) translateY(0); transform: scale(1.1, 1.1) translateY(0); } 60%, 80%, 100% { opacity: 1; -webkit-transform: scale(1, 1) translateY(0); -moz-transform: scale(1, 1) translateY(0); -ms-transform: scale(1, 1) translateY(0); -o-transform: scale(1, 1) translateY(0); transform: scale(1, 1) translateY(0); } } @-o-keyframes tinDown { 0% { opacity: 0; -webkit-transform: scale(1, 1) translateY(900%); -moz-transform: scale(1, 1) translateY(900%); -ms-transform: scale(1, 1) translateY(900%); -o-transform: scale(1, 1) translateY(900%); transform: scale(1, 1) translateY(900%); } 50%, 70%, 90% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateY(0); -moz-transform: scale(1.1, 1.1) translateY(0); -ms-transform: scale(1.1, 1.1) translateY(0); -o-transform: scale(1.1, 1.1) translateY(0); transform: scale(1.1, 1.1) translateY(0); } 60%, 80%, 100% { opacity: 1; -webkit-transform: scale(1, 1) translateY(0); -moz-transform: scale(1, 1) translateY(0); -ms-transform: scale(1, 1) translateY(0); -o-transform: scale(1, 1) translateY(0); transform: scale(1, 1) translateY(0); } } @-ms-keyframes tinDown { 0% { opacity: 0; -webkit-transform: scale(1, 1) translateY(900%); -moz-transform: scale(1, 1) translateY(900%); -ms-transform: scale(1, 1) translateY(900%); -o-transform: scale(1, 1) translateY(900%); transform: scale(1, 1) translateY(900%); } 50%, 70%, 90% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateY(0); -moz-transform: scale(1.1, 1.1) translateY(0); -ms-transform: scale(1.1, 1.1) translateY(0); -o-transform: scale(1.1, 1.1) translateY(0); transform: scale(1.1, 1.1) translateY(0); } 60%, 80%, 100% { opacity: 1; -webkit-transform: scale(1, 1) translateY(0); -moz-transform: scale(1, 1) translateY(0); -ms-transform: scale(1, 1) translateY(0); -o-transform: scale(1, 1) translateY(0); transform: scale(1, 1) translateY(0); } } @keyframes tinDown { 0% { opacity: 0; -webkit-transform: scale(1, 1) translateY(900%); -moz-transform: scale(1, 1) translateY(900%); -ms-transform: scale(1, 1) translateY(900%); -o-transform: scale(1, 1) translateY(900%); transform: scale(1, 1) translateY(900%); } 50%, 70%, 90% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateY(0); -moz-transform: scale(1.1, 1.1) translateY(0); -ms-transform: scale(1.1, 1.1) translateY(0); -o-transform: scale(1.1, 1.1) translateY(0); transform: scale(1.1, 1.1) translateY(0); } 60%, 80%, 100% { opacity: 1; -webkit-transform: scale(1, 1) translateY(0); -moz-transform: scale(1, 1) translateY(0); -ms-transform: scale(1, 1) translateY(0); -o-transform: scale(1, 1) translateY(0); transform: scale(1, 1) translateY(0); } }