.enter-left-bounce { -webkit-animation: enterLeftBounce 1s linear; -moz-animation: enterLeftBounce 1s linear; -ms-animation: enterLeftBounce 1s linear; -o-animation: enterLeftBounce 1s linear; animation: enterLeftBounce 1s linear; opacity: 1!important; } @-webkit-keyframes enterLeftBounce { 0% { -webkit-transform:translateX(-220px); opacity: 0; } 50% { -webkit-transform:translateX(0px); } 70% { -webkit-transform:translateX(0px); } 100% { -webkit-transform:translateX(0); opacity: 1; } } @-moz-keyframes enterLeftBounce { 0% { -moz-transform:translateX(-220px); opacity: 0; } 50% { -moz-transform:translateX(0px); } 70% { -moz-transform:translateX(0px); } 100% { -moz-transform:translateX(0); opacity: 1; } } @-o-keyframes enterLeftBounce { 0% { -o-transform:translateX(-220px); opacity: 0; } 50% { -o-transform:translateX(0px); } 70% { -o-transform:translateX(0px); } 100% { -o-transform:translateX(0); opacity: 1; } } @-ms-keyframes enterLeftBounce { 0% { -ms-transform:translateX(-220px); opacity: 0; } 50% { -ms-transform:translateX(0px); } 70% { -ms-transform:translateX(0px); } 100% { -ms-transform:translateX(0); opacity: 1; } } @keyframes enterLeftBounce { 0% { transform:translateX(-220px); opacity: 0; } 50% { transform:translateX(0px); } 70% { transform:translateX(0px); } 100% { transform:translateX(0); opacity: 1; } } .enter-left-bounce1 { -webkit-animation: enterLeftBounce1 1s linear; -moz-animation: enterLeftBounce1 1s linear; -ms-animation: enterLeftBounce1 1s linear; -o-animation: enterLeftBounce1 1s linear; animation: enterLeftBounce1 1s linear; opacity: 1!important; } @-webkit-keyframes enterLeftBounce1 { 0% { -webkit-transform:translateX(-220px); opacity: 0; } 50% { -webkit-transform:translateX(0px); } 70% { -webkit-transform:translateX(0px); } 100% { -webkit-transform:translateX(0); opacity: 1; } } @-moz-keyframes enterLeftBounce1 { 0% { -moz-transform:translateX(-220px); opacity: 0; } 50% { -moz-transform:translateX(0px); } 70% { -moz-transform:translateX(0px); } 100% { -moz-transform:translateX(0); opacity: 1; } } @-o-keyframes enterLeftBounce1 { 0% { -o-transform:translateX(-220px); opacity: 0; } 50% { -o-transform:translateX(0px); } 70% { -o-transform:translateX(0px); } 100% { -o-transform:translateX(0); opacity: 1; } } @-ms-keyframes enterLeftBounce1 { 0% { -ms-transform:translateX(-220px); opacity: 0; } 50% { -ms-transform:translateX(0px); } 70% { -ms-transform:translateX(0px); } 100% { -ms-transform:translateX(0); opacity: 1; } } @keyframes enterLeftBounce1 { 0% { transform:translateX(-220px); opacity: 0; } 50% { transform:translateX(0px); } 70% { transform:translateX(0px); } 100% { transform:translateX(0); opacity: 1; } } .enter-left-bounce2 { -webkit-animation: enterLeftBounce2 1s linear; -moz-animation: enterLeftBounce2 1s linear; -ms-animation: enterLeftBounce2 1s linear; -o-animation: enterLeftBounce2 1s linear; animation: enterLeftBounce2 1s linear; opacity: 1!important; } @-webkit-keyframes enterLeftBounce2 { 0% { -webkit-transform:translateX(-220px); opacity: 0; } 50% { -webkit-transform:translateX(0px); } 70% { -webkit-transform:translateX(0px); } 100% { -webkit-transform:translateX(0); opacity: 1; } } @-moz-keyframes enterLeftBounce2 { 0% { -moz-transform:translateX(-220px); opacity: 0; } 50% { -moz-transform:translateX(0px); } 70% { -moz-transform:translateX(0px); } 100% { -moz-transform:translateX(0); opacity: 1; } } @-o-keyframes enterLeftBounce2 { 0% { -o-transform:translateX(-220px); opacity: 0; } 50% { -o-transform:translateX(0px); } 70% { -o-transform:translateX(0px); } 100% { -o-transform:translateX(0); opacity: 1; } } @-ms-keyframes enterLeftBounce2 { 0% { -ms-transform:translateX(-220px); opacity: 0; } 50% { -ms-transform:translateX(0px); } 70% { -ms-transform:translateX(0px); } 100% { -ms-transform:translateX(0); opacity: 1; } } @keyframes enterLeftBounce2 { 0% { transform:translateX(-220px); opacity: 0; } 50% { transform:translateX(0px); } 70% { transform:translateX(0px); } 100% { transform:translateX(0); opacity: 1; } } .enter-down-bounce { -webkit-animation: enterDownBounce 1s linear; -moz-animation: enterDownBounce 1s linear; -ms-animation: enterDownBounce 1s linear; -o-animation: enterDownBounce 1s linear; animation: enterDownBounce 1s linear; opacity: 1!important; } @-webkit-keyframes enterDownBounce { 0% { -webkit-transform:translateY(-220px); opacity: 0; } 50% { -webkit-transform:translateY(0px); } 70% { -webkit-transform:translateY(0px); } 100% { -webkit-transform:translateY(0); opacity: 1; } } @-moz-keyframes enterDownBounce { 0% { -webkit-transform:translateY(-220px); opacity: 0; } 50% { -webkit-transform:translateY(0px); } 70% { -webkit-transform:translateY(0px); } 100% { -webkit-transform:translateY(0); opacity: 1; } } @-ms-keyframes enterDownBounce { 0% { -webkit-transform:translateY(-220px); opacity: 0; } 50% { -webkit-transform:translateY(0px); } 70% { -webkit-transform:translateY(0px); } 100% { -webkit-transform:translateY(0); opacity: 1; } } @-o-keyframes enterDownBounce { 0% { -webkit-transform:translateY(-220px); opacity: 0; } 50% { -webkit-transform:translateY(0px); } 70% { -webkit-transform:translateY(0px); } 100% { -webkit-transform:translateY(0); opacity: 1; } } @keyframes enterDownBounce { 0% { -webkit-transform:translateY(-220px); opacity: 0; } 50% { -webkit-transform:translateY(0px); } 70% { -webkit-transform:translateY(0px); } 100% { -webkit-transform:translateY(0); opacity: 1; } } .enter-up-bounce { -webkit-animation: enterUpBounce 1s linear; -moz-animation: enterUpBounce 1s linear; -ms-animation: enterUpBounce 1s linear; -o-animation: enterUpBounce 1s linear; animation: enterUpBounce 1s linear; opacity: 1!important; } @-webkit-keyframes enterUpBounce { 0% { -moz-transform:translateY(220px); opacity: 0; } 50% { -moz-transform:translateY(0px); } 70% { -moz-transform:translateY(0px); } 100% { -moz-transform:translateY(0); opacity: 1; } } @-moz-keyframes enterUpBounce { 0% { -moz-transform:translateY(220px); opacity: 0; } 50% { -moz-transform:translateY(0px); } 70% { -moz-transform:translateY(0px); } 100% { -moz-transform:translateY(0); opacity: 1; } } @-o-keyframes enterUpBounce { 0% { -moz-transform:translateY(220px); opacity: 0; } 50% { -moz-transform:translateY(0px); } 70% { -moz-transform:translateY(0px); } 100% { -moz-transform:translateY(0); opacity: 1; } } @-ms-keyframes enterUpBounce { 0% { -moz-transform:translateY(220px); opacity: 0; } 50% { -moz-transform:translateY(0px); } 70% { -moz-transform:translateY(0px); } 100% { -moz-transform:translateY(0); opacity: 1; } } @keyframes enterUpBounce { 0% { -moz-transform:translateY(220px); opacity: 0; } 50% { -moz-transform:translateY(0px); } 70% { -moz-transform:translateY(0px); } 100% { -moz-transform:translateY(0); opacity: 1; } } .enter-right-bounce { -webkit-animation: enterRightBounce 1s linear; -moz-animation: enterRightBounce 1s linear; -ms-animation: enterRightBounce 1s linear; -o-animation: enterRightBounce 1s linear; animation: enterRightBounce 1s linear; opacity: 1!important; } /* ENTER RIGHT BOUNCE */ @-webkit-keyframes enterRightBounce { 0% { -webkit-transform:translateX(220px); opacity: 0; } 50% { -webkit-transform:translateX(0px); } 70% { -webkit-transform:translateX(8px); } 100% { -webkit-transform:translateX(0); opacity: 1; } } @-moz-keyframes enterRightBounce { 0% { -moz-transform:translateX(220px); opacity: 0; } 50% { -moz-transform:translateX(0px); } 70% { -moz-transform:translateX(8px); } 100% { -moz-transform:translateX(0); opacity: 1; } } @-o-keyframes enterRightBounce { 0% { -o-transform:translateX(220px); opacity: 0; } 50% { -o-transform:translateX(0px); } 70% { -o-transform:translateX(8px); } 100% { -o-transform:translateX(0); opacity: 1; } } @-ms-keyframes enterRightBounce { 0% { -ms-transform:translateX(220px); opacity: 0; } 50% { -ms-transform:translateX(0px); } 70% { -ms-transform:translateX(8px); } 100% { -ms-transform:translateX(0); opacity: 1; } } @keyframes enterRightBounce { 0% { transform:translateX(220px); opacity: 0; } 50% { transform:translateX(0px); } 70% { transform:translateX(8px); } 100% { transform:translateX(0); opacity: 1; } } .enter-right-bounce1 { -webkit-animation: enterRightBounce1 1s linear; -moz-animation: enterRightBounce1 1s linear; -ms-animation: enterRightBounce1 1s linear; -o-animation: enterRightBounce1 1s linear; animation: enterRightBounce1 1s linear; opacity: 1!important; } /* ENTER RIGHT BOUNCE */ @-webkit-keyframes enterRightBounce1 { 0% { -webkit-transform:translateX(220px); opacity: 0; } 50% { -webkit-transform:translateX(0px); } 70% { -webkit-transform:translateX(8px); } 100% { -webkit-transform:translateX(0); opacity: 1; } } @-moz-keyframes enterRightBounce1 { 0% { -moz-transform:translateX(220px); opacity: 0; } 50% { -moz-transform:translateX(0px); } 70% { -moz-transform:translateX(8px); } 100% { -moz-transform:translateX(0); opacity: 1; } } @-o-keyframes enterRightBounce1 { 0% { -o-transform:translateX(220px); opacity: 0; } 50% { -o-transform:translateX(0px); } 70% { -o-transform:translateX(8px); } 100% { -o-transform:translateX(0); opacity: 1; } } @-ms-keyframes enterRightBounce1 { 0% { -ms-transform:translateX(220px); opacity: 0; } 50% { -ms-transform:translateX(0px); } 70% { -ms-transform:translateX(8px); } 100% { -ms-transform:translateX(0); opacity: 1; } } @keyframes enterRightBounce1 { 0% { transform:translateX(220px); opacity: 0; } 50% { transform:translateX(0px); } 70% { transform:translateX(8px); } 100% { transform:translateX(0); opacity: 1; } } .enter-right-bounce2 { -webkit-animation: enterRightBounce2 1s linear; -moz-animation: enterRightBounce2 1s linear; -ms-animation: enterRightBounce2 1s linear; -o-animation: enterRightBounce2 1s linear; animation: enterRightBounce2 1s linear; opacity: 1!important; } /* ENTER RIGHT BOUNCE */ @-webkit-keyframes enterRightBounce2 { 0% { -webkit-transform:translateX(220px); opacity: 0; } 50% { -webkit-transform:translateX(0px); } 70% { -webkit-transform:translateX(8px); } 100% { -webkit-transform:translateX(0); opacity: 1; } } @-moz-keyframes enterRightBounce2 { 0% { -moz-transform:translateX(220px); opacity: 0; } 50% { -moz-transform:translateX(0px); } 70% { -moz-transform:translateX(8px); } 100% { -moz-transform:translateX(0); opacity: 1; } } @-o-keyframes enterRightBounce2 { 0% { -o-transform:translateX(220px); opacity: 0; } 50% { -o-transform:translateX(0px); } 70% { -o-transform:translateX(8px); } 100% { -o-transform:translateX(0); opacity: 1; } } @-ms-keyframes enterRightBounce2 { 0% { -ms-transform:translateX(220px); opacity: 0; } 50% { -ms-transform:translateX(0px); } 70% { -ms-transform:translateX(8px); } 100% { -ms-transform:translateX(0); opacity: 1; } } @keyframes enterRightBounce2 { 0% { transform:translateX(220px); opacity: 0; } 50% { transform:translateX(0px); } 70% { transform:translateX(8px); } 100% { transform:translateX(0); opacity: 1; } } /*! * WickedCSS v1.0 (https://github.com/kristofferandreasen/wickedCSS) * Copyright 2015 Kristoffer Andreasen * MIT License */ /* ========== Rotation ========== */ .rotation{ animation-name: rotation; -webkit-animation-name: rotation; animation-duration: 4s; -webkit-animation-duration: 4s; animation-timing-function: linear; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; visibility: visible !important; } @-webkit-keyframes rotation { from { -webkit-transform: rotate(0deg) translateX(50%) rotate(0deg); } to { -webkit-transform: rotate(360deg) translateX(50%) rotate(-360deg); } } @keyframes rotation { from { transform: rotate(0deg) translateX(50%) rotate(0deg); } to { transform: rotate(360deg) translateX(50%) rotate(-360deg); } } /* ========== sideToSide ========== */ .sideToSide{ animation-name: sideToSide; -webkit-animation-name: sideToSide; animation-duration: 3s; -webkit-animation-duration: 3s; animation-timing-function: ease; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; visibility: visible !important; } @-webkit-keyframes sideToSide { 0% { -webkit-transform: translate(100%, 0); } 50% { -webkit-transform: translate(-100%, 0); } 100% { -webkit-transform: translate(100%, 0); } } @keyframes sideToSide { 0% { transform: translate(100%, 0); } 50% { transform: translate(-100%, 0); } 100% { transform: translate(100%, 0); } } /* ========== zoomer ========== */ .zoomer{ animation-name: zoomer; -webkit-animation-name: zoomer; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: cubic-bezier(0.5, 0.2, 0.3, 1.0); -webkit-animation-timing-function: cubic-bezier(0.5, 0.2, 0.3, 1.0); -webkit-animation-iteration-count: 1; animation-iteration-count: 1; visibility: visible !important; } @-webkit-keyframes zoomer { 0% { -webkit-transform: scale(.3); } 100% { -webkit-transform: scale(1); } } @keyframes zoomer { 0% { transform: scale(.3); } 100% { transform: scale(1); } } /* ========== zoomerOut ========== */ .zoomerOut{ animation-name: zoomerOut; -webkit-animation-name: zoomerOut; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: cubic-bezier(0.5, 0.2, 0.3, 1.0); -webkit-animation-timing-function: cubic-bezier(0.5, 0.2, 0.3, 1.0); -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; visibility: visible !important; } @-webkit-keyframes zoomerOut { 0% { -webkit-transform: scale(1); } 100% { -webkit-transform: scale(0); } } @keyframes zoomerOut { 0% { transform: scale(1); } 100% { transform: scale(0); } } /* ========== spinner ========== */ .spinner{ animation-name: spinner; -webkit-animation-name: spinner; animation-duration: 2s; -webkit-animation-duration: 2s; animation-timing-function: linear; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; visibility: visible !important; } @-webkit-keyframes spinner { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @keyframes spinner { from {transform:rotate(0deg);} to {transform:rotate(360deg);} } /* ========== pulse ========== */ .pulse{ animation-name: pulse; -webkit-animation-name: pulse; animation-duration: 2s; -webkit-animation-duration: 2s; animation-timing-function: linear; -webkit-animation-timing-function: linear; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; visibility: visible !important; } @keyframes pulse { 0% { transform: scale(0.9); opacity: 0.9; } 50% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.9); opacity: 0.9; } } @-webkit-keyframes pulse { 0% { -webkit-transform: scale(0.95); opacity: 0.9; } 50% { -webkit-transform: scale(1); opacity: 1; } 100% { -webkit-transform: scale(0.95); opacity: 0.9; } } /* ========== shake ========== */ .shake{ animation-name: shake; -webkit-animation-name: shake; animation-duration: 0.4s; -webkit-animation-duration: 0.4s; animation-timing-function: ease; -webkit-animation-timing-function: ease; animation-iteration-count: 1; -webkit-animation-iteration-count: 1; visibility: visible !important; } @keyframes shake { 0%, 100% {transform: translateX(0);} 16%, 50%, 83% {transform: translateX(-10px);} 33%, 66% {transform: translateX(10px);} } @-webkit-keyframes shake { 0%, 100% {-webkit-transform: translateX(0);} 16%, 50%, 83% {-webkit-transform: translateX(-10px);} 33%, 66% {-webkit-transform: translateX(10px);} } /* ========== barrelRoll ========== */ .barrelRoll{ animation-name: barrelRoll; -webkit-animation-name: barrelRoll; animation-duration: 0.4s; -webkit-animation-duration: 0.4s; animation-timing-function: ease; -webkit-animation-timing-function: ease; animation-iteration-count: 1; -webkit-animation-iteration-count: 1; visibility: visible !important; } @keyframes barrelRoll { from { transform: rotate(0deg) } to { transform: rotate(360deg) } } @-webkit-keyframes barrelRoll { from { -webkit-transform: rotate(0deg) } to { -webkit-transform: rotate(360deg) } } /* ========= floater ========= */ .floater{ animation-name: floater; -webkit-animation-name: floater; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; visibility: visible !important; } @keyframes floater { 0% { transform: translateY(0%); } 50% { transform: translateY(8%); } 100% { transform: translateY(0%); } } @-webkit-keyframes floater { 0% { -webkit-transform: translateY(0%); } 50% { -webkit-transform: translateY(8%); } 100% { -webkit-transform: translateY(0%); } } /* ====== wiggle ====== */ .wiggle{ animation-name: wiggle; -webkit-animation-name: wiggle; animation-duration: 2.5s; -webkit-animation-duration: 2.5s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; visibility: visible !important; } @keyframes wiggle { 0% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } 100% { transform: rotate(-4deg); } } @-webkit-keyframes wiggle { 0% { -webkit-transform: rotate(-4deg); } 50% { -webkit-transform: rotate(4deg); } 100% { -webkit-transform: rotate(-4deg); } } /* ====== pound ====== */ .pound{ animation-name: pound; -webkit-animation-name: pound; animation-duration: 0.5s; -webkit-animation-duration: 0.5s; animation-timing-function: ease; -webkit-animation-timing-function: ease; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; visibility: visible !important; } @keyframes pound { to { transform: scale(1.2); } } @-webkit-keyframes pound { to { transform: scale(1.2); } } /* ====== heartbeat ====== */ .heartbeat{ animation-name: heartbeat; -webkit-animation-name: heartbeat; animation-duration: 3s; -webkit-animation-duration: 3s; animation-timing-function: ease; -webkit-animation-timing-function: ease; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; visibility: visible !important; } @keyframes heartbeat { 0% { transform: scale(1); } 10% { transform: scale(1.2); } 20% { transform: scale(1.4); } 100% { transform: scale(1); } } @-webkit-keyframes heartbeat { 0% { -webkit-transform: scale(1); } 10% { -webkit-transform: scale(1.2); } 20% { -webkit-transform: scale(1.4); } 100% { -webkit-transform: scale(1); } } /* ====== rollerRight ====== */ .rollerRight{ animation-name: rollerRight; -webkit-animation-name: rollerRight; animation-duration: 2s; -webkit-animation-duration: 2s; animation-timing-function: ease; -webkit-animation-timing-function: ease; animation-iteration-count: 1; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } @keyframes rollerRight { 0% { transform: translateX(-200px) rotate(0); opacity: 0; } 100% { transform: translateX(0) rotate(2turn); opacity: 1; } } @-webkit-keyframes rollerRight { 0% { -webkit-transform: translateX(-200px) rotate(0); opacity: 0; } 100% { -webkit-transform: translateX(0) rotate(2turn); opacity: 1; } } /* ====== rollerLeft ====== */ .rollerLeft{ animation-name: rollerLeft; -webkit-animation-name: rollerLeft; animation-duration: 2s; -webkit-animation-duration: 2s; animation-timing-function: ease; -webkit-animation-timing-function: ease; animation-iteration-count: 1; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } @keyframes rollerLeft { 0% { transform: translateX(200px) rotate(0); opacity: 0; } 100% { transform: translateX(0) rotate(-2turn); opacity: 1; } } @-webkit-keyframes rollerLeft { 0% { -webkit-transform: translateX(200px) rotate(0); opacity: 0; } 100% { -webkit-transform: translateX(0) rotate(-2turn); opacity: 1; } } /* ========== Boring ones from here on down ========== */ /* ========== slideDown ========== */ .slideDown{ animation-name: slideDown; -webkit-animation-name: slideDown; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease; -webkit-animation-timing-function: ease; } @keyframes slideDown { 0% { transform: translateY(-100%); opacity: 0; } 100% { transform: translateY(0%); opacity: 1; } } @-webkit-keyframes slideDown { 0% { -webkit-transform: translateY(-100%); opacity: 0; } 100% { -webkit-transform: translateY(0%); opacity: 1; } } /* ========== slideUp ========== */ .slideUp{ animation-name: slideUp; -webkit-animation-name: slideUp; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease; -webkit-animation-timing-function: ease; } @keyframes slideUp { 0% { transform: translateY(100%); opacity: 0; } 100% { transform: translateY(0%); opacity: 1; } } @-webkit-keyframes slideUp { 0% { -webkit-transform: translateY(100%); opacity: 0; } 100% { -webkit-transform: translateY(0%); opacity: 1; } } /* ========== slideLeft ========== */ .slideLeft{ animation-name: slideLeft; -webkit-animation-name: slideLeft; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease; -webkit-animation-timing-function: ease; } @keyframes slideLeft { 0% { transform: translateX(150%); opacity: 0; } 100% { transform: translateX(0%); opacity: 1; } } @-webkit-keyframes slideLeft { 0% { -webkit-transform: translateX(150%); opacity: 0; } 100% { -webkit-transform: translateX(0%); opacity: 1; } } /* ========== slideRight ========== */ .slideRight{ animation-name: slideRight; -webkit-animation-name: slideRight; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease; -webkit-animation-timing-function: ease; } @keyframes slideRight { 0% { transform: translateX(-150%); opacity: 0; } 100% { transform: translateX(0%); opacity: 1; } } @-webkit-keyframes slideRight { 0% { -webkit-transform: translateX(-150%); opacity: 0; } 100% { -webkit-transform: translateX(0%); opacity: 1; } } /* ========== fadeIn ========== */ .fadeIn{ animation-name: fadeIn; -webkit-animation-name: fadeIn; animation-duration: 2s; -webkit-animation-duration: 2s; animation-timing-function: ease; -webkit-animation-timing-function: ease; visibility: visible !important; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } /* ========== fadeOut ========== */ .fadeOut{ animation-name: fadeOut; -webkit-animation-name: fadeOut; animation-duration: 2s; -webkit-animation-duration: 2s; animation-timing-function: ease; -webkit-animation-timing-function: ease; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } /* ========== rotateInRight ========== */ .rotateInRight{ animation-name: rotateInRight; -webkit-animation-name: rotateInRight; animation-duration: 3s; -webkit-animation-duration: 3s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } @-webkit-keyframes rotateInRight { from { -webkit-transform: rotate(0deg) translateX(100%) rotate(0deg); } to { -webkit-transform: rotate(360deg) translateX(0) rotate(-360deg); } } @keyframes rotateInRight { from { transform: rotate(0deg) translateX(100%) rotate(0deg); } to { transform: rotate(360deg) translateX(0) rotate(-360deg); } } /* ========== rotateInLeft ========== */ .rotateInLeft{ animation-name: rotateInLeft; -webkit-animation-name: rotateInLeft; animation-duration: 3s; -webkit-animation-duration: 3s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } @-webkit-keyframes rotateInLeft { from { -webkit-transform: rotate(0deg) translateX(-100%) rotate(0deg); } to { -webkit-transform: rotate(360deg) translateX(0) rotate(-360deg); } } @keyframes rotateInLeft { from { transform: rotate(0deg) translateX(-100%) rotate(0deg); } to { transform: rotate(360deg) translateX(0) rotate(-360deg); } } /* ========== rotateIn ========== */ .rotateIn { animation-name: rotateIn; -webkit-animation-name: rotateIn; animation-duration: 3s; -webkit-animation-duration: 3s; animation-timing-function: ease; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-transform-origin: center; transform-origin: center; } @-webkit-keyframes rotateIn { 0% { -webkit-transform: rotate3d(0, 0, 1, -720deg); transform: rotate3d(0, 0, 1, -720deg); opacity: 0; } 100% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateIn { 0% { -webkit-transform: rotate3d(0, 0, 1, -720deg); transform: rotate3d(0, 0, 1, -720deg); opacity: 0; } 100% { -webkit-transform: none; transform: none; opacity: 1; } } /* ========== bounceIn ========== */ .bounceIn{ -webkit-animation-name: bounceIn; animation-name: bounceIn; -webkit-animation-duration: .8s; animation-duration: .8s; -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(.97, .97, .97); transform: scale3d(.97, .97, .97); } 100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(.97, .97, .97); transform: scale3d(.97, .97, .97); } 100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .treed { -webkit-perspective:600; -moz-perspective:600; -o-perspective:600; -ms-perspective:600; perspective:600; } .legend-flip:before, .legend-flip { opacity: 1!important; -webkit-perspective: 600; perspective: 600; -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; } .legend-flip { opacity: 1!important; -webkit-animation: legendFlip 1.2s ease-out; -moz-animation: legendFlip 1.2s ease-out; -ms-animation: legendFlip 1.2s ease-out; -o-animation: legendFlip 1.2s ease-out; animation: legendFlip 1.2s ease-out; -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); transform: rotateY(-180deg); } .legend-flip:before { opacity:1!important; width: 100%; height: 100%; position: absolute; top: 0; -webkit-animation: legendFlipBefore 1.2s ease-out; -moz-animation: legendFlipBefore 1.2s ease-out; -ms-animation: legendFlipBefore 1.2s ease-out; -o-animation: legendFlipBefore 1.2s ease-out; animation: legendFlipBefore 1.2s ease-out; left: 0; background: #00D7D7; content: ""; z-index: 1000; } .rotate-row { border-radius: 100%; overflow: hidden; opacity:1!important; -webkit-animation: rotateRow infinite 20s ease-in; -moz-animation: rotateRow infinite 20s ease-in; -ms-animation: rotateRow infinite 20s ease-in; -o-animation: rotateRow infinite 20s ease-in; animation: rotateRow infinite 20s ease-in } .scale-before:before { opacity:1!important; -webkit-animation: scaleBefore 1 0.5s ease-out; -moz-animation: scaleBefore 1 0.5s ease-out; -ms-animation: scaleBefore 1 0.5s ease-out; -o-animation: scaleBefore 1 0.5s ease-out; animation: scaleBefore 1 0.5s ease-out; } .legend-down:before { opacity:1!important; -webkit-animation: legendDown 1 0.5s ease-out; -moz-animation: legendDown 1 0.5s ease-out; -ms-animation: legendDown 1 0.5s ease-out; -o-animation: legendDown 1 0.5s ease-out; animation: legendDown 1 0.5s ease-out; } .legend-up:before { opacity:1!important; -webkit-animation: legendUp 1 0.5s ease-out; -moz-animation: legendUp 1 0.5s ease-out; -ms-animation: legendUp 1 0.5s ease-out; -o-animation: legendUp 1 0.5s ease-out; animation: legendUp 1 0.5s ease-out; } .legend-left:before { opacity:1!important; -webkit-animation: legendLeft 1 0.5s ease-out; -moz-animation: legendLeft 1 0.5s ease-out; -ms-animation: legendLeft 1 0.5s ease-out; -o-animation: legendLeft 1 0.5s ease-out; animation: legendLeft 1 0.5s ease-out; } .legend-right:before { opacity:1!important; -webkit-animation: legendRight 1 0.5s ease-out; -moz-animation: legendRight 1 0.5s ease-out; -ms-animation: legendRight 1 0.5s ease-out; -o-animation: legendRight 1 0.5s ease-out; animation: legendRight 1 0.5s ease-out; } .scale-before, .legend-down, .legend-up, .legend-left, .portrait-before, .portrait-blur, .legend-right { opacity: 1!important; } .scale-before:before, .legend-down:before, .legend-up:before, .legend-left:before, .legend-right:before { background: rgba(0, 0, 0, 0.5) } .portrait-before:before, .portrait-blur:before, .scale-before:before, .legend-down:before, .legend-up:before, .legend-left:before, .legend-right:before { content: ""; display: block; position: absolute; width: 92%; height: 64%; z-index: 1000; top: 9px; left: 9px; } .portrait-blur:before { opacity: 1!important; box-shadow: inset 0 0 100px 100px rgba(0, 0, 0, 0.5); -webkit-animation: portraitBlur 1 0.6s ease-out; -moz-animation: portraitBlur 1 0.6s ease-out; -ms-animation: portraitBlur 1 0.6s ease-out; -o-animation: portraitBlur 1 0.6s ease-out; animation: portraitBlur 1 0.6s ease-out } .portrait-before:before { opacity: 1!important; box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0.5); -webkit-animation: portraitBefore 1 0.3s ease-out; -moz-animation: portraitBefore 1 0.3s ease-out; -ms-animation: portraitBefore 1 0.3s ease-out; -o-animation: portraitBefore 1 0.3s ease-out; animation: portraitBefore 1 0.3s ease-out } .tree-flip { opacity: 1!important; -webkit-animation: treeFlip 1 1s ease-in-out; -moz-animation: treeFlip 1 1s ease-in-out; -ms-animation: treeFlip 1 1s ease-in-out; -o-animation: treeFlip 1 1s ease-in-out; animation: treeFlip 1 1s ease-in-out; -webkit-transform: rotateY(-90deg); -moz-transform: rotateY(-90deg); -o-transform: rotateY(-90deg); -ms-transform: rotateY(-90deg); transform: rotateY(-90deg); -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -o-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; } .tree-flip-right { opacity: 1!important; -webkit-animation: treeFlipRight 1 1s ease-in-out; -moz-animation: treeFlipRight 1 1s ease-in-out; -ms-animation: treeFlipRight 1 1s ease-in-out; -o-animation: treeFlipRight 1 1s ease-in-out; animation: treeFlipRight 1 1s ease-in-out; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -o-transform: rotateY(90deg); -ms-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-transform-origin: 100% 0; -moz-transform-origin: 100% 0; -o-transform-origin: 100% 0; -ms-transform-origin: 100% 0; transform-origin: 100% 0; } .tree-flip-up { opacity: 1!important; -webkit-animation: treeFlipUp 1 1s ease-in-out; -moz-animation: treeFlipUp 1 1s ease-in-out; -ms-animation: treeFlipUp 1 1s ease-in-out; -o-animation: treeFlipUp 1 1s ease-in-out; animation: treeFlipUp 1 1s ease-in-out; -webkit-transform: rotateX(90deg); -moz-transform: rotateX(90deg); -o-transform: rotateX(90deg); -ms-transform: rotateX(90deg); transform: rotateX(90deg); -webkit-transform-origin: 100% 0; -moz-transform-origin: 100% 0; -o-transform-origin: 100% 0; -ms-transform-origin: 100% 0; transform-origin: 100% 0; } .tree-flip-down { opacity: 1!important; -webkit-animation: treeFlipDown 1 1s ease-in-out; -moz-animation: treeFlipDown 1 1s ease-in-out; -ms-animation: treeFlipDown 1 1s ease-in-out; -o-animation: treeFlipDown 1 1s ease-in-out; animation: treeFlipDown 1 1s ease-in-out; -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); -o-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); transform: rotateX(-90deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -o-transform-origin: 0 100%; -ms-transform-origin: 0 100%; transform-origin: 0 100%; } .four-rock { opacity: 1!important; -webkit-animation: fourRock 1 2s ease-out; -o-animation: fourRock 1 2s ease-out; -moz-animation: fourRock 1 2s ease-out; -ms-animation: fourRock 1 2s ease-out; animation: fourRock 1 2s ease-out; } .rotate-down-bounce { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-animation: rotateDowBounce 1 2s ease-in; -o-animation: rotateDowBounce 1 2s ease-in; -moz-animation: rotateDowBounce 1 2s ease-in; -ms-animation: rotateDowBounce 1 2s ease-in; animation: rotateDowBounce 1 2s ease-in; opacity: 0; filter:alpha(opacity=0); } .journal { -webkit-animation: journal 2s ease-in; -o-animation: journal 2s ease-in; -moz-animation: journal 2s ease-in; -ms-animation: journal 2s ease-in; animation: journal 2s ease-in; opacity: 1!important; } .flash-bang { opacity: 1!important; -webkit-animation: flashBang 1 2s linear; -o-animation: flashBang 1 2s linear; -moz-animation: flashBang 1 2s linear; -ms-animation: flashBang 1 2s linear; animation: flashBang 1 2s linear; } .dance { opacity: 1!important; -webkit-animation: dance 1 2s linear; -o-animation: dance 1 2s linear; -moz-animation: dance 1 2s linear; -ms-animation: dance 1 2s linear; animation: dance 1 2s linear; } .flip-left { -webkit-animation: flipLeft 1 1s ease-out; -o-animation: flipLeft 1 1s ease-out; -moz-animation: flipLeft 1 1s ease-out; -ms-animation: flipLeft 1 1s ease-out; animation: flipLeft 1 1s ease-out; opacity: 1!important; } .flip-top { -webkit-animation: flipTop 1 1s ease-out; -o-animation: flipTop 1 1s ease-out; -moz-animation: flipTop 1 1s ease-out; -ms-animation: flipTop 1 1s ease-out; animation: flipTop 1 1s ease-out; opacity: 1!important; } .flip-right { -webkit-animation: flipRight 1 1s ease-out; -o-animation: flipRight 1 1s ease-out; -moz-animation: flipRight 1 1s ease-out; -ms-animation: flipRight 1 1s ease-out; animation: flipRight 1 1s ease-out; opacity: 1!important; } .flip-bottom { -webkit-animation: flipBottom 1 2s linear; -o-animation: flipBottom 1 2s linear; -moz-animation: flipBottom 1 2s linear; -ms-animation: flipBottom 1 2s linear; animation: flipBottom 1 2s linear; opacity: 1!important; } .rotate-flip { -webkit-animation: rotateFlip 1 1s linear; -o-animation: rotateFlip 1 1s linear; -moz-animation: rotateFlip 1 1s linear; -ms-animation: rotateFlip 1 1s linear; animation: rotateFlip 1 1s linear; opacity: 1!important; } .rotate-flip-down { opacity: 1!important; -webkit-animation: rotateFlipDown 1 1s linear; -o-animation: rotateFlipDown 1 1s linear; -moz-animation: rotateFlipDown 1 1s linear; -ms-animation: rotateFlipDown 1 1s linear; animation: rotateFlipDown 1 1s linear; } .bomba { -webkit-animation: bomba 1 1s ease-out; -o-animation: bomba 1 1s ease-out; -moz-animation: bomba 1 1s ease-out; -ms-animation: bomba 1 1s ease-out; animation: bomba 1 1s ease-out; opacity: 0; filter:alpha(opacity=0); } .jump-bounce { opacity: 1!important; -webkit-animation: jumpBounce 1 1.5s ease-in; -o-animation: jumpBounce 1 1.5s ease-in; -moz-animation: jumpBounce 1 1.5s ease-in; -ms-animation: jumpBounce 1 1.5s ease-in; animation: jumpBounce 1 1.5s ease-in; } .rotate-out { -webkit-animation: rotateOut 1 1.5s ease-out; -o-animation: rotateOut 1 1.5s ease-out; -moz-animation: rotateOut 1 1.5s ease-out; -ms-animation: rotateOut 1 1.5s ease-out; animation: rotateOut 1 1.5s ease-out; opacity: 0; filter:alpha(opacity=0); } .pulse-slow { -webkit-animation: pulseSlow infinite alternate 1s ease-in-out; -o-animation: pulseSlow infinite alternate 1s ease-in-out; -moz-animation: pulseSlow infinite alternate 1s ease-in-out; -ms-animation: pulseSlow infinite alternate 1s ease-in-out; animation: pulseSlow infinite alternate 1s ease-in-out; } .enter-down-bounce { -webkit-animation: enterDownBounce 1s linear; -moz-animation: enterDownBounce 1s linear; -ms-animation: enterDownBounce 1s linear; -o-animation: enterDownBounce 1s linear; animation: enterDownBounce 1s linear; opacity: 1!important; } .enter-up-bounce { -webkit-animation: enterUpBounce 1s linear; -moz-animation: enterUpBounce 1s linear; -ms-animation: enterUpBounce 1s linear; -o-animation: enterUpBounce 1s linear; animation: enterUpBounce 1s linear; opacity: 1!important; } .enter-left-bounce { -webkit-animation: enterLeftBounce 1s linear; -moz-animation: enterLeftBounce 1s linear; -ms-animation: enterLeftBounce 1s linear; -o-animation: enterLeftBounce 1s linear; animation: enterLeftBounce 1s linear; opacity: 1!important; } .enter-right-bounce { -webkit-animation: enterRightBounce 1s linear; -moz-animation: enterRightBounce 1s linear; -ms-animation: enterRightBounce 1s linear; -o-animation: enterRightBounce 1s linear; animation: enterRightBounce 1s linear; opacity: 1!important; } .scale-bounce { -webkit-animation: scaleBounce 1s linear; -moz-animation: scaleBounce 1s linear; -ms-animation: scaleBounce 1s linear; -o-animation: scaleBounce 1s linear; animation: scaleBounce 1s linear; opacity: 1!important; } .jamp { opacity: 1!important; -webkit-animation: jamp 1s linear; -moz-animation: jamp 1s linear; -ms-animation: jamp 1s linear; -o-animation: jamp 1s linear; animation: jamp 1s linear; } .flip-left-bounce { -webkit-animation: flipLeftBounce 1s ease-in-out; -moz-animation: flipLeftBounce 1s ease-in-out; -ms-animation: flipLeftBounce 1s ease-in-out; -o-animation: flipLeftBounce 1s ease-in-out; animation: flipLeftBounce 1s ease-in-out; opacity: 1!important; } .flip-right-bounce { -webkit-animation: flipRightBounce 1s ease-in-out; -moz-animation: flipRightBounce 1s ease-in-out; -ms-animation: flipRightBounce 1s ease-in-out; -o-animation: flipRightBounce 1s ease-in-out; animation: flipRightBounce 1s ease-in-out; opacity: 1!important; } .pulse { opacity: 1!important; -webkit-animation: pulse infinite alternate linear 0.5s; -moz-animation: pulse infinite alternate linear 0.5s; -o-animation: pulse infinite alternate linear 0.5s; -ms-animation: pulse infinite alternate linear 0.5s; animation: pulse infinite alternate linear 0.5s; } @-webkit-keyframes pulse { 0% { -webkit-transform: scale(1); } 100% { -webkit-transform: scale(1.05); } } @-moz-keyframes pulse { 0% { -moz-transform: scale(1); } 100% { -moz-transform: scale(1.05); } } @-ms-keyframes pulse { 0% { -ms-transform: scale(1); } 100% { -ms-transform: scale(1.05); } } @-o-keyframes pulse { 0% { -o-transform: scale(1); } 100% { -o-transform: scale(1.05); } } @keyframes pulse { 0% { transform: scale(1); } 100% { transform: scale(1.05); } } /* FLIP RIGHT BOUNCE */ @-webkit-keyframes flipRightBounce { 0% { opacity: 0; -webkit-transform:rotateY(-70deg); } 50% { opacity: 1; -webkit-transform:rotateY(5deg); } 80% { -webkit-transform:rotateY(-20deg); } 100% { -webkit-transform:rotateY(0deg); } } @-moz-keyframes flipRightBounce { 0% { opacity: 0; -moz-transform:rotateY(-70deg); } 50% { opacity: 1; -moz-transform:rotateY(5deg); } 80% { -moz-transform:rotateY(-20deg); } 100% { -moz-transform:rotateY(0deg); } } @-ms-keyframes flipRightBounce { 0% { opacity: 0; -ms-transform:rotateY(-70deg); } 50% { opacity: 1; -ms-transform:rotateY(5deg); } 80% { -ms-transform:rotateY(-20deg); } 100% { -ms-transform:rotateY(0deg); } } @-o-keyframes flipRightBounce { 0% { opacity: 0; -o-transform:rotateY(-70deg); } 50% { opacity: 1; -o-transform:rotateY(5deg); } 80% { -o-transform:rotateY(-20deg); } 100% { -o-transform:rotateY(0deg); } } @keyframes flipRightBounce { 0% { opacity: 0; transform:rotateY(-70deg); } 50% { opacity: 1; transform:rotateY(5deg); } 80% { transform:rotateY(-20deg); } 100% { transform:rotateY(0deg); } } /* FLIP LEFT BOUNCE */ @-webkit-keyframes flipLeftBounce { 0% { opacity: 0; -webkit-transform:rotateY(70deg); } 50% { opacity: 1; -webkit-transform:rotateY(-5deg); } 80% { -webkit-transform:rotateY(20deg); } 100% { -webkit-transform:rotateY(0deg); } } @-moz-keyframes flipLeftBounce { 0% { opacity: 0; -moz-transform:rotateY(70deg); } 50% { opacity: 1; -moz-transform:rotateY(-5deg); } 80% { -moz-transform:rotateY(20deg); } 100% { -moz-transform:rotateY(0deg); } } @-ms-keyframes flipLeftBounce { 0% { opacity: 0; -ms-transform:rotateY(70deg); } 50% { opacity: 1; -ms-transform:rotateY(-5deg); } 80% { -ms-transform:rotateY(20deg); } 100% { -ms-transform:rotateY(0deg); } } @-o-keyframes flipLeftBounce { 0% { opacity: 0; -o-transform:rotateY(70deg); } 50% { opacity: 1; -o-transform:rotateY(-5deg); } 80% { -o-transform:rotateY(20deg); } 100% { -o-transform:rotateY(0deg); } } @keyframes flipLeftBounce { 0% { opacity: 0; transform:rotateY(70deg); } 50% { opacity: 1; transform:rotateY(-5deg); } 80% { transform:rotateY(20deg); } 100% { transform:rotateY(0deg); } } /* JAMP */ @-webkit-keyframes jamp { 0% { -webkit-transform:translateY(0); } 10% { -webkit-transform:translateY(-50px); } 25% { -webkit-transform:translateY(-50px) scale(1.1); } 35% { -webkit-transform:translateY(-50px) scale(1); } 45% { -webkit-transform:translateY(-50px) scale(1.2); } 55% { -webkit-transform:translateY(-50px) scale(1); } 65% { -webkit-transform:translate(150px, -50px) scale(0.8); } 85% { -webkit-transform:translate(150px, -50px) scale(1.2); } 95% { -webkit-transform:translate(0, 0px) scale(1); } 100% { -webkit-transform:translate(0, 0); } } @-moz-keyframes jamp { 0% { -moz-transform:translateY(0); } 10% { -moz-transform:translateY(-50px); } 25% { -moz-transform:translateY(-50px) scale(1.1); } 35% { -moz-transform:translateY(-50px) scale(1); } 45% { -moz-transform:translateY(-50px) scale(1.2); } 55% { -moz-transform:translateY(-50px) scale(1); } 65% { -moz-transform:translate(150px, -50px) scale(0.8); } 85% { -moz-transform:translate(150px, -50px) scale(1.2); } 95% { -moz-transform:translate(0, 0px) scale(1); } 100% { -moz-transform:translate(0, 0); } } @-ms-keyframes jamp { 0% { -ms-transform:translateY(0); } 10% { -ms-transform:translateY(-50px); } 25% { -ms-transform:translateY(-50px) scale(1.1); } 35% { -ms-transform:translateY(-50px) scale(1); } 45% { -ms-transform:translateY(-50px) scale(1.2); } 55% { -ms-transform:translateY(-50px) scale(1); } 65% { -ms-transform:translate(150px, -50px) scale(0.8); } 85% { -ms-transform:translate(150px, -50px) scale(1.2); } 95% { -ms-transform:translate(0, 0px) scale(1); } 100% { -ms-transform:translate(0, 0); } } @-o-keyframes jamp { 0% { -o-transform:translateY(0); } 10% { -o-transform:translateY(-50px); } 25% { -o-transform:translateY(-50px) scale(1.1); } 35% { -o-transform:translateY(-50px) scale(1); } 45% { -o-transform:translateY(-50px) scale(1.2); } 55% { -o-transform:translateY(-50px) scale(1); } 65% { -o-transform:translate(150px, -50px) scale(0.8); } 85% { -o-transform:translate(150px, -50px) scale(1.2); } 95% { -o-transform:translate(0, 0px) scale(1); } 100% { -o-transform:translate(0, 0); } } @keyframes jamp { 0% { transform:translateY(0); } 10% { transform:translateY(-50px); } 25% { transform:translateY(-50px) scale(1.1); } 35% { transform:translateY(-50px) scale(1); } 45% { transform:translateY(-50px) scale(1.2); } 55% { transform:translateY(-50px) scale(1); } 65% { transform:translate(150px, -50px) scale(0.8); } 85% { transform:translate(150px, -50px) scale(1.2); } 95% { transform:translate(0, 0px) scale(1); } 100% { transform:translate(0, 0); } } /* SCALE BOUNCE */ @-webkit-keyframes scaleBounce { 0% { -webkit-transform:scale(1.5); opacity: 0; } 50% { -webkit-transform:scale(1); } 70% { -webkit-transform:scale(1.1); } 100% { opacity: 1; -webkit-transform:scale(1); } } @-moz-keyframes scaleBounce { 0% { -moz-transform:scale(1.5); opacity: 0; } 50% { -moz-transform:scale(1); } 70% { -moz-transform:scale(1.1); } 100% { opacity: 1; -moz-transform:scale(1); } } @-o-keyframes scaleBounce { 0% { -o-transform:scale(1.5); opacity: 0; } 50% { -o-transform:scale(1); } 70% { -o-transform:scale(1.1); } 100% { opacity: 1; -o-transform:scale(1); } } @-ms-keyframes scaleBounce { 0% { -ms-transform:scale(1.5); opacity: 0; } 50% { -ms-transform:scale(1); } 70% { -ms-transform:scale(1.1); } 100% { opacity: 1; -ms-transform:scale(1); } } @keyframes scaleBounce { 0% { transform:scale(1.5); opacity: 0; } 50% { transform:scale(1); } 70% { transform:scale(1.1); } 100% { opacity: 1; transform:scale(1); } } /* ENTER RIGHT BOUNCE */ @-webkit-keyframes enterRightBounce { 0% { -webkit-transform:translateX(220px); opacity: 0; } 50% { -webkit-transform:translateX(0px); } 70% { -webkit-transform:translateX(8px); } 100% { -webkit-transform:translateX(0); opacity: 1; } } @-moz-keyframes enterRightBounce { 0% { -moz-transform:translateX(220px); opacity: 0; } 50% { -moz-transform:translateX(0px); } 70% { -moz-transform:translateX(8px); } 100% { -moz-transform:translateX(0); opacity: 1; } } @-o-keyframes enterRightBounce { 0% { -o-transform:translateX(220px); opacity: 0; } 50% { -o-transform:translateX(0px); } 70% { -o-transform:translateX(8px); } 100% { -o-transform:translateX(0); opacity: 1; } } @-ms-keyframes enterRightBounce { 0% { -ms-transform:translateX(220px); opacity: 0; } 50% { -ms-transform:translateX(0px); } 70% { -ms-transform:translateX(8px); } 100% { -ms-transform:translateX(0); opacity: 1; } } @keyframes enterRightBounce { 0% { transform:translateX(220px); opacity: 0; } 50% { transform:translateX(0px); } 70% { transform:translateX(8px); } 100% { transform:translateX(0); opacity: 1; } } /* ENTER LEFT BOUNCE */ @-webkit-keyframes enterLeftBounce { 0% { -webkit-transform:translateX(-220px); opacity: 0; } 50% { -webkit-transform:translateX(0px); } 70% { -webkit-transform:translateX(-8px); } 100% { -webkit-transform:translateX(0); opacity: 1; } } @-moz-keyframes enterLeftBounce { 0% { -moz-transform:translateX(-220px); opacity: 0; } 50% { -moz-transform:translateX(0px); } 70% { -moz-transform:translateX(-8px); } 100% { -moz-transform:translateX(0); opacity: 1; } } @-o-keyframes enterLeftBounce { 0% { -o-transform:translateX(-220px); opacity: 0; } 50% { -o-transform:translateX(0px); } 70% { -o-transform:translateX(-8px); } 100% { -o-transform:translateX(0); opacity: 1; } } @-ms-keyframes enterLeftBounce { 0% { -ms-transform:translateX(-220px); opacity: 0; } 50% { -ms-transform:translateX(0px); } 70% { -ms-transform:translateX(-8px); } 100% { -ms-transform:translateX(0); opacity: 1; } } @keyframes enterLeftBounce { 0% { transform:translateX(-220px); opacity: 0; } 50% { transform:translateX(0px); } 70% { transform:translateX(-8px); } 100% { transform:translateX(0); opacity: 1; } } /* ENTER UP BOUNCE */ @-webkit-keyframes enterUpBounce { 0% { -webkit-transform:translateY(220px); opacity: 0; } 50% { -webkit-transform:translateY(0px); } 70% { -webkit-transform:translateY(20px); } 100% { -webkit-transform:translateY(0); opacity: 1; } } @-moz-keyframes enterUpBounce { 0% { -moz-transform:translateY(220px); opacity: 0; } 50% { -moz-transform:translateY(0px); } 70% { -moz-transform:translateY(20px); } 100% { -moz-transform:translateY(0); opacity: 1; } } @-o-keyframes enterUpBounce { 0% { -o-transform:translateY(220px); opacity: 0; } 50% { -o-transform:translateY(0px); } 70% { -o-transform:translateY(20px); } 100% { -o-transform:translateY(0); opacity: 1; } } @-ms-keyframes enterUpBounce { 0% { -ms-transform:translateY(220px); opacity: 0; } 50% { -ms-transform:translateY(0px); } 70% { -ms-transform:translateY(20px); } 100% { -ms-transform:translateY(0); opacity: 1; } } @keyframes enterUpBounce { 0% { transform:translateY(220px); opacity: 0; } 50% { transform:translateY(0px); } 70% { transform:translateY(20px); } 100% { transform:translateY(0); opacity: 1; } } /* ENTER DOWN BOUNCE */ @-webkit-keyframes enterDownBounce { 0% { -webkit-transform:translateY(-220px); opacity: 0; } 50% { -webkit-transform:translateY(0px); } 70% { -webkit-transform:translateY(-20px); } 100% { -webkit-transform:translateY(0); opacity: 1; } } @-moz-keyframes enterDownBounce { 0% { -moz-transform:translateY(-220px); opacity: 0; } 50% { -moz-transform:translateY(0px); } 70% { -moz-transform:translateY(-20px); } 100% { -moz-transform:translateY(0); opacity: 1; } } @-ms-keyframes enterDownBounce { 0% { -ms-transform:translateY(-220px); opacity: 0; } 50% { -ms-transform:translateY(0px); } 70% { -ms-transform:translateY(-20px); } 100% { -ms-transform:translateY(0); opacity: 1; } } @-o-keyframes enterDownBounce { 0% { -o-transform:translateY(-220px); opacity: 0; } 50% { -o-transform:translateY(0px); } 70% { -o-transform:translateY(-20px); } 100% { -o-transform:translateY(0); opacity: 1; } } @keyframes enterDownBounce { 0% { transform:translateY(-220px); opacity: 0; } 50% { transform:translateY(0px); } 70% { transform:translateY(-20px); } 100% { transform:translateY(0); opacity: 1; } } /* ROTATE DOWN */ @-webkit-keyframes pulseSlow { 0% { -webkit-transform:scale(1); opacity: 1; } 100% { -webkit-transform:scale(0.85); opacity: 0.5; } } @-moz-keyframes pulseSlow { 0% { -moz-transform:scale(1); opacity: 1; } 100% { -moz-transform:scale(0.85); opacity: 0.5; } } @-ms-keyframes pulseSlow { 0% { -ms-transform:scale(1); opacity: 1; } 100% { -ms-transform:scale(0.85); opacity: 0.5; } } @-o-keyframes pulseSlow { 0% { -o-transform:scale(1); opacity: 1; } 100% { -o-transform:scale(0.85); opacity: 0.5; } } @keyframes pulseSlow { 0% { transform:scale(1); opacity: 1; } 100% { transform:scale(0.85); opacity: 0.5; } } /* ROTATE DOWN */ @-webkit-keyframes rotateOut { 0% { opacity: 1; } 50%, 100% { -webkit-transform:scale(0) rotateY(189deg); } } @-moz-keyframes rotateOut { 0% { opacity: 1; } 50%, 100% { -moz-transform:scale(0) rotateY(189deg); } } @-ms-keyframes rotateOut { 0% { opacity: 1; } 50%, 100% { -ms-transform:scale(0) rotateY(189deg); } } @-o-keyframes rotateOut { 0% { opacity: 1; } 50%, 100% { -o-transform:scale(0) rotateY(189deg); } } @keyframes rotateOut { 0% { opacity: 1; } 50%, 100% { transform:scale(0) rotateY(189deg); } } /* TREE FLIP DOWN */ @-webkit-keyframes treeFlipDown { 0% { -webkit-transform: rotateX(0); } 100% { -webkit-transform: rotateX(-90deg); } } @-moz-keyframes treeFlipDown { 0% { -moz-transform: rotateX(0); } 100% { -moz-transform: rotateX(-90deg); } } @-ms-keyframes treeFlipDown { 0% { -ms-transform: rotateX(0); } 100% { -ms-transform: rotateX(-90deg); } } @-o-keyframes treeFlipDown { 0% { -o-transform: rotateX(0); } 100% { -o-transform: rotateX(-90deg); } } @keyframes treeFlipDown { 0% { transform: rotateX(0); } 100% { transform: rotateX(-90deg); } } /* TREE FLIP UP */ @-webkit-keyframes treeFlipUp { 0% { -webkit-transform: rotateX(0); } 100% { -webkit-transform: rotateX(90deg); } } @-moz-keyframes treeFlipUp { 0% { -moz-transform: rotateX(0); } 100% { -moz-transform: rotateX(90deg); } } @-ms-keyframes treeFlipUp { 0% { -ms-transform: rotateX(0); } 100% { -ms-transform: rotateX(90deg); } } @-o-keyframes treeFlipUp { 0% { -o-transform: rotateX(0); } 100% { -o-transform: rotateX(90deg); } } @keyframes treeFlipUp { 0% { transform: rotateX(0); } 100% { transform: rotateX(90deg); } } /* TREE FLIP RIGHT */ @-webkit-keyframes treeFlipRight { 0% { -webkit-transform: rotateY(0); } 100% { -webkit-transform: rotateY(90deg); } } @-moz-keyframes treeFlipRight { 0% { -moz-transform: rotateY(0); } 100% { -moz-transform: rotateY(90deg); } } @-ms-keyframes treeFlipRight { 0% { -ms-transform: rotateY(0); } 100% { -ms-transform: rotateY(90deg); } } @-o-keyframes treeFlipRight { 0% { -o-transform: rotateY(0); } 100% { -o-transform: rotateY(90deg); } } @keyframes treeFlipRight { 0% { transform: rotateY(0); } 100% { transform: rotateY(90deg); } } /* TREE FLIP */ @-webkit-keyframes treeFlip { 0% { -webkit-transform: rotateY(0); } 100% { -webkit-transform: rotateY(-90deg); } } @-moz-keyframes treeFlip { 0% { -moz-transform: rotateY(0); } 100% { -moz-transform: rotateY(-90deg); } } @-ms-keyframes treeFlip { 0% { -ms-transform: rotateY(0); } 100% { -ms-transform: rotateY(-90deg); } } @-o-keyframes treeFlip { 0% { -o-transform: rotateY(0); } 100% { -o-transform: rotateY(-90deg); } } @keyframes treeFlip { 0% { transform: rotateY(0); } 100% { transform: rotateY(-90deg); } } /* JUMP BOUNCE */ @-webkit-keyframes jumpBounce { 10% { -webkit-transform:translateY(-150px); } 20%, 35%, 50% { -webkit-transform:translateY(0px); } 25% { -webkit-transform:translateY(-60px); } 40% { -webkit-transform:translateY(-40px); } } @-moz-keyframes jumpBounce { 10% { -moz-transform:translateY(-150px); } 20%, 35%, 50% { -moz-transform:translateY(0px); } 25% { -moz-transform:translateY(-60px); } 40% { -moz-transform:translateY(-40px); } } @-ms-keyframes jumpBounce { 10% { -ms-transform:translateY(-150px); } 20%, 35%, 50% { -ms-transform:translateY(0px); } 25% { -ms-transform:translateY(-60px); } 40% { -ms-transform:translateY(-40px); } } @-o-keyframes jumpBounce { 10% { -o-transform:translateY(-150px); } 20%, 35%, 50% { -o-transform:translateY(0px); } 25% { -o-transform:translateY(-60px); } 40% { -o-transform:translateY(-40px); } } @keyframes jumpBounce { 10% { transform:translateY(-150px); } 20%, 35%, 50% { transform:translateY(0px); } 25% { transform:translateY(-60px); } 40% { transform:translateY(-40px); } } /* FOUR ROCK */ @-webkit-keyframes fourRock { 0% { -webkit-transform-origin: 0 0; } 5% { -webkit-transform: scale(0.5); } 10% { -webkit-transform: scale(0.5) } 15% { -webkit-transform: scale(0.5) translateX(130px); } 20% { -webkit-transform: scale(0.5) translateX(130px); } 25% { -webkit-transform: scale(0.5) translate(130px, 130px); } 30% { -webkit-transform: scale(0.5) translate(0px, 130px); } 35% { -webkit-transform: scale(0.5) translate(0px, 0px); } 40% { -webkit-transform: scale(1); } 100% { -webkit-transform: scale(1); -webkit-transform-origin: 0 0; } } @-moz-keyframes fourRock { 0% { -moz-transform-origin: 0 0; } 5% { -moz-transform: scale(0.5); } 10% { -moz-transform: scale(0.5) } 15% { -moz-transform: scale(0.5) translateX(130px); } 20% { -moz-transform: scale(0.5) translateX(130px); } 25% { -moz-transform: scale(0.5) translate(130px, 130px); } 30% { -moz-transform: scale(0.5) translate(0px, 130px); } 35% { -moz-transform: scale(0.5) translate(0px, 0px); } 40% { -moz-transform: scale(1); } 100% { -moz-transform: scale(1); -webkit-transform-origin: 0 0; } } @-ms-keyframes fourRock { 0% { -ms-transform-origin: 0 0; } 5% { -ms-transform: scale(0.5); } 10% { -ms-transform: scale(0.5) } 15% { -ms-transform: scale(0.5) translateX(130px); } 20% { -ms-transform: scale(0.5) translateX(130px); } 25% { -ms-transform: scale(0.5) translate(130px, 130px); } 30% { -ms-transform: scale(0.5) translate(0px, 130px); } 35% { -ms-transform: scale(0.5) translate(0px, 0px); } 40% { -ms-transform: scale(1); } 100% { -ms-transform: scale(1); -webkit-transform-origin: 0 0; } } @-o-keyframes fourRock { 0% { -o-transform-origin: 0 0; } 5% { -o-transform: scale(0.5); } 10% { -o-transform: scale(0.5) } 15% { -o-transform: scale(0.5) translateX(130px); } 20% { -o-transform: scale(0.5) translateX(130px); } 25% { -o-transform: scale(0.5) translate(130px, 130px); } 30% { -o-transform: scale(0.5) translate(0px, 130px); } 35% { -o-transform: scale(0.5) translate(0px, 0px); } 40% { -o-transform: scale(1); } 100% { -o-transform: scale(1); -webkit-transform-origin: 0 0; } } @keyframes fourRock { 0% { transform-origin: 0 0; } 5% { transform: scale(0.5); } 10% { transform: scale(0.5) } 15% { transform: scale(0.5) translateX(130px); } 20% { transform: scale(0.5) translateX(130px); } 25% { transform: scale(0.5) translate(130px, 130px); } 30% { transform: scale(0.5) translate(0px, 130px); } 35% { transform: scale(0.5) translate(0px, 0px); } 40% { transform: scale(1); } 100% { transform: scale(1); -webkit-transform-origin: 0 0; } } /* BOMBA */ @-webkit-keyframes bomba { 0% { -webkit-transform-origin: -50% 0%; -webkit-transform: rotateZ(0); opacity: 1; } 50%, 100% { -webkit-transform: rotateZ(-210deg); -webkit-transform-origin: -20% 0%; } 47%, 100% { opacity: 0; } } @-moz-keyframes bomba { 0% { -moz-transform-origin: -20% 0%; -moz-transform: rotateZ(0); opacity: 1; } 50%, 100% { -moz-transform: rotateZ(-210deg); -moz-transform-origin: -20% 0%; } } @-ms-keyframes bomba { 0% { -ms-transform-origin: -20% 0%; -ms-transform: rotateZ(0); opacity: 1; } 50%, 100% { -ms-transform: rotateZ(-210deg); -ms-transform-origin: -20% 0%; } } @-o-keyframes bomba { 0% { -o-transform-origin: -20% 0%; -o-transform: rotateZ(0); opacity: 1; } 50%, 100% { -o-transform: rotateZ(-210deg); -o-transform-origin: -20% 0%; } } @keyframes bomba { 0% { transform-origin: -20% 0%; transform: rotateZ(0); opacity: 1; } 50%, 100% { transform: rotateZ(-210deg); transform-origin: -20% 0%; } } /* ROTATE FLIP */ @-webkit-keyframes rotateFlipDown { 0% { -webkit-transform-origin: 50%; } 40% { -webkit-transform: rotateX(70deg); opacity: 0; } 60% { -webkit-transform: rotateX(70deg); opacity: 0; } 100% { -webkit-transform: rotateX(0deg); opacity: 1; } } @-moz-keyframes rotateFlipDown { 0% { -moz-transform-origin: 50%; } 40% { -moz-transform: rotateX(70deg); opacity: 0; } 60% { -moz-transform: rotateX(70deg); opacity: 0; } 100% { -moz-transform: rotateX(0deg); opacity: 1; } } @-ms-keyframes rotateFlipDown { 0% { -ms-transform-origin: 50%; } 40% { -ms-transform: rotateX(70deg); opacity: 0; } 60% { -ms-transform: rotateX(70deg); opacity: 0; } 100% { -ms-transform: rotateX(0deg); opacity: 1; } } @-o-keyframes rotateFlipDown { 0% { -o-transform-origin: 50%; } 40% { -o-transform: rotateX(70deg); opacity: 0; } 60% { -o-transform: rotateX(70deg); opacity: 0; } 100% { -o-transform: rotateX(0deg); opacity: 1; } } @keyframes rotateFlipDown { 0% { transform-origin: 50%; } 40% { transform: rotateX(70deg); opacity: 0; } 60% { transform: rotateX(70deg); opacity: 0; } 100% { transform: rotateX(0deg); opacity: 1; } } /* ROTATE FLIP */ @-webkit-keyframes rotateFlip { 0% { -webkit-transform-origin: 50%; } 40% { -webkit-transform: rotateY(70deg); opacity: 0; } 60% { -webkit-transform: rotateY(70deg); opacity: 0; } 100% { -webkit-transform: rotateY(0deg); opacity: 1; } } @-moz-keyframes rotateFlip { 0% { -moz-transform-origin: 50%; } 40% { -moz-transform: rotateY(70deg); opacity: 0; } 60% { -moz-transform: rotateY(70deg); opacity: 0; } 100% { -moz-transform: rotateY(0deg); opacity: 1; } } @-ms-keyframes rotateFlip { 0% { -ms-transform-origin: 50%; } 40% { -ms-transform: rotateY(70deg); opacity: 0; } 60% { -ms-transform: rotateY(70deg); opacity: 0; } 100% { -ms-transform: rotateY(0deg); opacity: 1; } } @-o-keyframes rotateFlip { 0% { -o-transform-origin: 50%; } 40% { -o-transform: rotateY(70deg); opacity: 0; } 60% { -o-transform: rotateY(70deg); opacity: 0; } 100% { -o-transform: rotateY(0deg); opacity: 1; } } @keyframes rotateFlip { 0% { transform-origin: 50%; } 40% { transform: rotateY(70deg); opacity: 0; } 60% { transform: rotateY(70deg); opacity: 0; } 100% { transform: rotateY(0deg); opacity: 1; } } /* FLIP BOTTOM */ @-webkit-keyframes flipBottom { 0% { transform: translateY(100px); opacity: 0; } 70% { transform: translateY(30px); opacity: 1; } 100% { transform: translateY(0); } } @-moz-keyframes flipBottom { 0% { transform: translateY(100px); opacity: 0; } 70% { transform: translateY(30px); opacity: 1; } 100% { transform: translateY(0); } } @-ms-keyframes flipBottom { 0% { transform: translateY(100px); opacity: 0; } 70% { transform: translateY(30px); opacity: 1; } 100% { transform: translateY(0); } } @-o-keyframes flipBottom { 0% { transform: translateY(100px); opacity: 0; } 70% { transform: translateY(30px); opacity: 1; } 100% { transform: translateY(0); } } @keyframes flipBottom { 0% { transform: translateY(100px); opacity: 0; } 70% { transform: translateY(30px); opacity: 1; } 100% { transform: translateY(0); } } /* FLIP RIGHT */ @-webkit-keyframes flipRight { 0% { -webkit-transform: translateX(100px); opacity: 0; } 70% { -webkit-transform: translateX(0); opacity: 1; } } @-moz-keyframes flipRight { 0% { -moz-transform: translateX(100px); opacity: 0; } 70% { -moz-transform: translateX(0); opacity: 1; } } @-ms-keyframes flipRight { 0% { -ms-transform: translateX(100px); opacity: 0; } 70% { -ms-transform: translateX(0); opacity: 1; } } @-o-keyframes flipRight { 0% { -o-transform: translateX(100px); opacity: 0; } 70% { -o-transform: translateX(0); opacity: 1; } } @keyframes flipRight { 0% { transform: translateX(100px); opacity: 0; } 70% { transform: translateX(0); opacity: 1; } } /* FLIP TOP */ @-webkit-keyframes flipTop { 0% { -webkit-transform: translateY(-100px); opacity: 0; } 70% { -webkit-transform: translateY(0); opacity: 1; } } @-moz-keyframes flipTop { 0% { -moz-transform: translateY(-100px); opacity: 0; } 70% { -moz-transform: translateY(0); opacity: 1; } } @-ms-keyframes flipTop { 0% { -ms-transform: translateY(-100px); opacity: 0; } 70% { -ms-transform: translateY(0); opacity: 1; } } @-o-keyframes flipTop { 0% { -o-transform: translateY(-100px); opacity: 0; } 70% { -o-transform: translateY(0); opacity: 1; } } @keyframes flipTop { 0% { transform: translateY(-100px); opacity: 0; } 70% { transform: translateY(0); opacity: 1; } } /* FLIP LEFT */ @-webkit-keyframes flipLeft { 0% { -webkit-transform: translateX(-100px); opacity: 0; } 70% { -webkit-transform: translateX(0); opacity: 1; } } @-moz-keyframes flipLeft { 0% { -moz-transform: translateX(-100px); opacity: 0; } 70% { -moz-transform: translateX(0); opacity: 1; } } @-ms-keyframes flipLeft { 0% { -ms-transform: translateX(-100px); opacity: 0; } 70% { -ms-transform: translateX(0); opacity: 1; } } @-o-keyframes flipLeft { 0% { -o-transform: translateX(-100px); opacity: 0; } 70% { -o-transform: translateX(0); opacity: 1; } } @keyframes flipLeft { 0% { transform: translateX(-100px); opacity: 0; } 70% { transform: translateX(0); opacity: 1; } } /* JOURNAL */ @-webkit-keyframes journal { 0% { -webkit-transform: scale(0) rotate(-360deg); } 80% { -webkit-transform: scale(0.5) rotate(-180deg); } 100% { -webkit-transform: scale(1) rotate(0); } } @-moz-keyframes journal { 0% { -moz-transform: scale(0) rotate(-360deg); } 80% { -moz-transform: scale(0.5) rotate(-180deg); } 100% { -moz-transform: scale(1) rotate(0); } } @-ms-keyframes journal { 0% { -ms-transform: scale(0) rotate(-360deg); } 80% { -ms-transform: scale(0.5) rotate(-180deg); } 100% { -ms-transform: scale(1) rotate(0); } } @-o-keyframes journal { 0% { -o-transform: scale(0) rotate(-360deg); } 80% { -o-transform: scale(0.5) rotate(-180deg); } 100% { -o-transform: scale(1) rotate(0); } } @keyframes journal { 0% { transform: scale(0) rotate(-360deg); } 80% { transform: scale(0.5) rotate(-180deg); } 100% { transform: scale(1) rotate(0); } } /* DANCE */ @-webkit-keyframes dance { 0%, 10%, 20% { -webkit-transform:rotateZ(10deg); } 5%, 15%, 25% { -webkit-transform:rotateZ(-10deg) } 35%, 60%, 100% { -webkit-transform:scale(1) rotateZ(0deg); box-shadow:inset 0 0 0 0 transparent; } 40% { -webkit-transform:scale(1.3); box-shadow:inset 0 0 0 0; box-shadow:inset 0 0 0 2px rgba(0, 0, 0, 0.1); } } @-moz-keyframes dance { 0%, 10%, 20% { -moz-transform:rotateZ(10deg); } 5%, 15%, 25% { -moz-transform:rotateZ(-10deg) } 35%, 60%, 100% { -moz-transform:scale(1) rotateZ(0deg); box-shadow:inset 0 0 0 0 transparent; } 40% { -moz-transform:scale(1.3); box-shadow:inset 0 0 0 0; box-shadow:inset 0 0 0 2px rgba(0, 0, 0, 0.1); } } @-ms-keyframes dance { 0%, 10%, 20% { -ms-transform:rotateZ(10deg); } 5%, 15%, 25% { -ms-transform:rotateZ(-10deg) } 35%, 60%, 100% { -ms-transform:scale(1) rotateZ(0deg); box-shadow:inset 0 0 0 0 transparent; } 40% { -ms-transform:scale(1.3); box-shadow:inset 0 0 0 0; box-shadow:inset 0 0 0 2px rgba(0, 0, 0, 0.1); } } @-o-keyframes dance { 0%, 10%, 20% { -o-transform:rotateZ(10deg); } 5%, 15%, 25% { -o-transform:rotateZ(-10deg) } 35%, 60%, 100% { -o-transform:scale(1) rotateZ(0deg); box-shadow:inset 0 0 0 0 transparent; } 40% { -o-transform:scale(1.3); box-shadow:inset 0 0 0 0; box-shadow:inset 0 0 0 2px rgba(0, 0, 0, 0.1); } } @keyframes dance { 0%, 10%, 20% { transform:rotateZ(10deg); } 5%, 15%, 25% { transform:rotateZ(-10deg) } 35%, 60%, 100% { transform:scale(1) rotateZ(0deg); box-shadow:inset 0 0 0 0 transparent; } 40% { transform:scale(1.3); box-shadow:inset 0 0 0 0; box-shadow:inset 0 0 0 2px rgba(0, 0, 0, 0.1); } } /* FLASH BANG */ @-webkit-keyframes flashBang { 0%, 20% { opacity: 0; } 10%, 30%, 100% { opacity: 1; } } @-moz-keyframes flashBang { 0%, 20% { opacity: 0; } 10%, 30%, 100% { opacity: 1; } } @-ms-keyframes flashBang { 0%, 20% { opacity: 0; } 10%, 30%, 100% { opacity: 1; } } @-o-keyframes flashBang { 0%, 20% { opacity: 0; } 10%, 30%, 100% { opacity: 1; } } @keyframes flashBang { 0%, 20% { opacity: 0; } 10%, 30%, 100% { opacity: 1; } } /* ROTATE DOW BOUNCE */ @-webkit-keyframes rotateDowBounce { 0% { -webkit-transform: rotate(0deg); opacity: 1; } 20% { -webkit-transform: rotate(25deg); } 40% { -webkit-transform:rotate(30deg); } 10%, 30%, 50% { -webkit-transform: rotate(40deg); opacity: 1; filter:alpha(opacity=100); } 80%, 100% { -webkit-transform: rotate(30deg) translateY(310px) translateX(230px); opacity: 0; filter:alpha(opacity=0); } } @-moz-keyframes rotateDowBounce { 0% { -moz-transform: rotate(0deg); opacity: 1; } 20% { -moz-transform: rotate(25deg); } 40% { -moz-transform:rotate(30deg); } 10%, 30%, 50% { -moz-transform: rotate(40deg); opacity: 1; filter:alpha(opacity=100); } 80%, 100% { -moz-transform: rotate(30deg) translateY(310px) translateX(230px); opacity: 0; filter:alpha(opacity=0); } } @-ms-keyframes rotateDowBounce { 0% { -ms-transform: rotate(0deg); opacity: 1; } 20% { -ms-transform: rotate(25deg); } 40% { -ms-transform:rotate(30deg); } 10%, 30%, 50% { -ms-transform: rotate(40deg); opacity: 1; filter:alpha(opacity=100); } 80%, 100% { -ms-transform: rotate(30deg) translateY(310px) translateX(230px); opacity: 0; filter:alpha(opacity=0); } } @-o-keyframes rotateDowBounce { 0% { -o-transform: rotate(0deg); opacity: 1; } 20% { -o-transform: rotate(25deg); } 40% { -o-transform:rotate(30deg); } 10%, 30%, 50% { -o-transform: rotate(40deg); opacity: 1; filter:alpha(opacity=100); } 80%, 100% { -o-transform: rotate(30deg) translateY(310px) translateX(230px); opacity: 0; filter:alpha(opacity=0); } } @keyframes rotateDowBounce { 0% { transform: rotate(0deg); opacity: 1; } 20% { transform: rotate(25deg); } 40% { transform:rotate(30deg); } 10%, 30%, 50% { transform: rotate(40deg); opacity: 1; filter:alpha(opacity=100); } 80%, 100% { transform: rotate(30deg) translateY(310px) translateX(230px); opacity: 0; filter:alpha(opacity=0); } } /* ROTATE ROW */ @-webkit-keyframes rotateRow { 0% { -webkit-transform: translateY(0); } 0.5% { -webkit-transform: translateY(-20px); } 1% { -webkit-transform: translateY(0px); } 100% { -webkit-transform:rotate(20000deg); } } @-moz-keyframes rotateRow { 0% { -moz-transform: translateY(0); } 0.5% { -moz-transform: translateY(-20px); } 1% { -moz-transform: translateY(0px); } 100% { -moz-transform:rotate(20000deg); } } @-ms-keyframes rotateRow { 0% { -ms-transform: translateY(0); } 0.5% { -ms-transform: translateY(-20px); } 1% { -ms-transform: translateY(0px); } 100% { -ms-transform:rotate(20000deg); } } @-o-keyframes rotateRow { 0% { -o-transform: translateY(0); } 0.5% { -o-transform: translateY(-20px); } 1% { -o-transform: translateY(0px); } 100% { -o-transform:rotate(20000deg); } } @-keyframes rotateRow { 0% { transform: translateY(0); } 0.5% { transform: translateY(-20px); } 1% { transform: translateY(0px); } 100% { transform:rotate(20000deg); } } /* PORTRAIT BEFORE */ @-webkit-keyframes portraitBefore { 0% { box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.5); width: 100%; height: 74%; top: 0; left: 0; } 100% { box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0.5); width: 92%; height: 64%; top: 9px; left: 9px; } } @-moz-keyframes portraitBefore { 0% { box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.5); width: 100%; height: 74%; top: 0; left: 0; } 100% { box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0.5); width: 92%; height: 64%; top: 9px; left: 9px; } } @-ms-keyframes portraitBefore { 0% { box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.5); width: 100%; height: 74%; top: 0; left: 0; } 100% { box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0.5); width: 92%; height: 64%; top: 9px; left: 9px; } } @-o-keyframes portraitBefore { 0% { box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.5); width: 100%; height: 74%; top: 0; left: 0; } 100% { box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0.5); width: 92%; height: 64%; top: 9px; left: 9px; } } @keyframes portraitBefore { 0% { box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.5); width: 100%; height: 74%; top: 0; left: 0; } 100% { box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0.5); width: 92%; height: 64%; top: 9px; left: 9px; } } /* SCALE BEFORE */ @-webkit-keyframes scaleBefore { 0% { -webkit-transform:scale(1.5); } 100% { -webkit-transform:scale(1); } } @-moz-keyframes scaleBefore { 0% { -webkit-transform:scale(1.5); } 100% { -webkit-transform:scale(1); } } @-ms-keyframes scaleBefore { 0% { -webkit-transform:scale(1.5); } 100% { -webkit-transform:scale(1); } } @-o-keyframes scaleBefore { 0% { -webkit-transform:scale(1.5); } 100% { -webkit-transform:scale(1); } } @keyframes scaleBefore { 0% { -webkit-transform:scale(1.5); } 100% { -webkit-transform:scale(1); } } /* LEGEND DOWN */ @-webkit-keyframes legendDown { 0% { top:0; height: 0; } 100% { height: 64%; top: 9px; } } @-moz-keyframes legendDown { 0% { top:0; height: 0; } 100% { height: 64%; top: 9px; } } @-ms-keyframes legendDown { 0% { top:0; height: 0; } 100% { height: 64%; top: 9px; } } @-o-keyframes legendDown { 0% { top:0; height: 0; } 100% { height: 64%; top: 9px; } } @keyframes legendDown { 0% { top:0; height: 0; } 100% { height: 64%; top: 9px; } } /* LEGEND Up */ @-webkit-keyframes legendUp { 0% { top:70%; height: 0; } 100% { height: 64%; top: 9px; } } @-moz-keyframes legendUp { 0% { top:70%; height: 0; } 100% { height: 64%; top: 9px; } } @-ms-keyframes legendUp { 0% { top:70%; height: 0; } 100% { height: 64%; top: 9px; } } @-o-keyframes legendUp { 0% { top:70%; height: 0; } 100% { height: 64%; top: 9px; } } @keyframes legendUp { 0% { top:70%; height: 0; } 100% { height: 64%; top: 9px; } } /* LEGEND LEFT */ @-webkit-keyframes legendLeft { 0% { left:0%; width: 0; } 100% { left: 9px; width: 92%; } } @-moz-keyframes legendLeft { 0% { left:0%; width: 0; } 100% { left: 9px; width: 92%; } } @-ms-keyframes legendLeft { 0% { left:0%; width: 0; } 100% { left: 9px; width: 92%; } } @-o-keyframes legendLeft { 0% { left:0%; width: 0; } 100% { left: 9px; width: 92%; } } @keyframes legendLeft { 0% { left:0%; width: 0; } 100% { left: 9px; width: 92%; } } /* LEGEND RIGHT */ @-webkit-keyframes legendRight { 0% { left:100%; width: 0; } 100% { left: 9px; width: 92%; } } @-moz-keyframes legendRight { 0% { left:100%; width: 0; } 100% { left: 9px; width: 92%; } } @-ms-keyframes legendRight { 0% { left:100%; width: 0; } 100% { left: 9px; width: 92%; } } @-o-keyframes legendRight { 0% { left:100%; width: 0; } 100% { left: 9px; width: 92%; } } @keyframes legendRight { 0% { left:100%; width: 0; } 100% { left: 9px; width: 92%; } } /* LEGEND FLIP BEFORE */ @-webkit-keyframes legendFlipBefore { 0% { -webkit-transform:rotateY(-180deg); } 60% { -webkit-transform:rotateY(30deg); } 80% { -webkit-transform:rotateY(-30deg); } 100% { -webkit-transform:rotateY(0); } } @-moz-keyframes legendFlipBefore { 0% { -moz-transform:rotateY(-180deg); } 60% { -moz-transform:rotateY(30deg); } 80% { -moz-transform:rotateY(-30deg); } 100% { -moz-transform:rotateY(0); } } @-ms-keyframes legendFlipBefore { 0% { -ms-transform:rotateY(-180deg); } 60% { -ms-transform:rotateY(30deg); } 80% { -ms-transform:rotateY(-30deg); } 100% { -ms-transform:rotateY(0); } } @-o-keyframes legendFlipBefore { 0% { -o-transform:rotateY(-180deg); } 60% { -o-transform:rotateY(30deg); } 80% { -o-transform:rotateY(-30deg); } 100% { -o-transform:rotateY(0); } } @keyframes legendFlipBefore { 0% { transform:rotateY(-180deg); } 60% { transform:rotateY(30deg); } 80% { transform:rotateY(-30deg); } 100% { transform:rotateY(0); } } /* LEGEND FLIP */ @-webkit-keyframes legendFlip { 0% { -webkit-transform:rotateY(0); } 60% { -webkit-transform:rotateY(-210deg); } 100% { -webkit-transform:rotateY(-150deg); } 100% { -webkit-transform:rotateY(-180deg); } } @-moz-keyframes legendFlip { 0% { -moz-transform:rotateY(0); } 60% { -moz-transform:rotateY(-210deg); } 100% { -moz-transform:rotateY(-150deg); } 100% { -moz-transform:rotateY(-180deg); } } @-ms-keyframes legendFlip { 0% { -ms-transform:rotateY(0); } 60% { -ms-transform:rotateY(-210deg); } 100% { -ms-transform:rotateY(-150deg); } 100% { -ms-transform:rotateY(-180deg); } } @-o-keyframes legendFlip { 0% { -o-transform:rotateY(0); } 60% { -o-transform:rotateY(-210deg); } 100% { -o-transform:rotateY(-150deg); } 100% { -o-transform:rotateY(-180deg); } } @keyframes legendFlip { 0% { transform:rotateY(0); } 60% { transform:rotateY(-210deg); } 100% { transform:rotateY(-150deg); } 100% { transform:rotateY(-180deg); } } /* LEGEND FLIP */ @-webkit-keyframes portraitBlur { 0% { box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.5); width: 100%; height: 74%; top: 0; left: 0; } 100% { box-shadow: inset 0 0 100px 100px rgba(0, 0, 0, 0.5); width: 92%; height: 64%; top: 9px; left: 9px; } } /* Vivify version: 1.0 Licensed under the MIT license - http://opensource.org/licenses/MIT The MIT License Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ /* Copyright (c) 2017 Martin Knize. */ .vivify { -webkit-animation-duration: .8s; -webkit-animation-fill-mode: both; animation-duration: .8s; animation-fill-mode: both; } .infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .pulsate { -webkit-animation-name: pulsate; animation-name: pulsate; -webkit-transform-origin: center; transform-origin: center; } @keyframes pulsate { 0% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(0.8, 0.8, 0.8); transform: scale3d(0.8, 0.8, 0.8); } 100% { -webkit-animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22); animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .blink { -webkit-animation-name: blink; animation-name: blink; -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-animation-duration: 2s; animation-duration: 2s; } @keyframes blink { 0% { opacity: 0; } 100% { opacity: 1; } } .hitLeft { -webkit-animation-name: hitLeft; animation-name: hitLeft; -webkit-backface-visibility: hidden; backface-visibility: hidden; } @keyframes hitLeft { 0% { -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); -webkit-transform: translateX(0); transform: translateX(0); } 40% { -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); -webkit-transform: translateX(20px) rotate(4deg); transform: translateX(20px) rotate(4deg); } } .hitRight { -webkit-animation-name: hitRight; animation-name: hitRight; -webkit-backface-visibility: hidden; backface-visibility: hidden; } @keyframes hitRight { 0% { -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); -webkit-transform: translateX(0); transform: translateX(0); } 40% { -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); -webkit-transform: translateX(-20px) rotate(-4deg); transform: translateX(-20px) rotate(-4deg); } } .shake { -webkit-animation-name: shake; animation-name: shake; -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); } @keyframes shake { 10% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 20% { -webkit-transform: translateX(10px); transform: translateX(10px); } 30% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 40% { -webkit-transform: translateX(10px); transform: translateX(10px); } 50% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 60% { -webkit-transform: translateX(10px); transform: translateX(10px); } 70% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 80% { -webkit-transform: translateX(10px); transform: translateX(10px); } 90% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } } .ball { -webkit-animation-name: ball; animation-name: ball; -webkit-animation-duration: 2s; animation-duration: 2s; } @keyframes ball { 0% { -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 20% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1); animation-timing-function: cubic-bezier(0.42, 0, 1, 1); -webkit-transform: translate3d(0, -100px, 0); transform: translate3d(0, -100px, 0); } 40% { -webkit-animation-timing-function: cubic-bezier(0, 0, 0.58, 1); animation-timing-function: cubic-bezier(0, 0, 0.58, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 60% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1); animation-timing-function: cubic-bezier(0.42, 0, 1, 1); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 75% { -webkit-animation-timing-function: cubic-bezier(0, 0, 0.58, 1); animation-timing-function: cubic-bezier(0, 0, 0.58, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 85% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1); animation-timing-function: cubic-bezier(0.42, 0, 1, 1); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 100% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .pullUp { -webkit-animation-name: pullUp; animation-name: pullUp; -webkit-backface-visibility: hidden; backface-visibility: hidden; } @keyframes pullUp { 0% { -webkit-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); } 30% { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: scale3d(1, 0, 1); transform: scale3d(1, 0, 1); -webkit-transform-origin: center bottom; transform-origin: center bottom; } 100% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .pullDown { -webkit-animation-name: pullDown; animation-name: pullDown; -webkit-backface-visibility: hidden; backface-visibility: hidden; } @keyframes pullDown { 0% { -webkit-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); } 50% { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: scale3d(1, 0, 1); transform: scale3d(1, 0, 1); -webkit-transform-origin: center top; transform-origin: center top; } 100% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .pullLeft { -webkit-animation-name: pullLeft; animation-name: pullLeft; -webkit-backface-visibility: hidden; backface-visibility: hidden; } @keyframes pullLeft { 0% { -webkit-transform: scale3d(0, 1, 1); transform: scale3d(0, 1, 1); } 50% { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: scale3d(0, 1, 1); transform: scale3d(0, 1, 1); -webkit-transform-origin: center left; transform-origin: center left; } 100% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .pullRight { -webkit-animation-name: pullRight; animation-name: pullRight; -webkit-backface-visibility: hidden; backface-visibility: hidden; } @keyframes pullRight { 0% { -webkit-transform: scale3d(0, 1, 1); transform: scale3d(0, 1, 1); } 50% { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: scale3d(0, 1, 1); transform: scale3d(0, 1, 1); -webkit-transform-origin: center right; transform-origin: center right; } 100% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .jumpInLeft { -webkit-animation-name: jumpInLeft; animation-name: jumpInLeft; -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-backface-visibility: hidden; backface-visibility: hidden; } @keyframes jumpInLeft { 0% { opacity: 0; -webkit-transform: scale3d(0.5, 0.5, 0.5) rotate(-90deg); transform: scale3d(0.5, 0.5, 0.5) rotate(-90deg); } 50% { opacity: 1; -webkit-transform: scale3d(1.2, 1.2, 1.2) rotate(10deg); transform: scale3d(1.2, 1.2, 1.2) rotate(10deg); } 70% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-5deg); transform: scale3d(0.9, 0.9, 0.9) rotate(-5deg); } 90% { -webkit-transform: scale3d(1, 1, 1) rotate(0deg); transform: scale3d(1, 1, 1) rotate(0deg); } } .jumpInRight { -webkit-animation-name: jumpInRight; animation-name: jumpInRight; -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-backface-visibility: hidden; backface-visibility: hidden; } @keyframes jumpInRight { 0% { opacity: 0; -webkit-transform: scale3d(0.5, 0.5, 0.5) rotate(90deg); transform: scale3d(0.5, 0.5, 0.5) rotate(90deg); } 50% { opacity: 1; -webkit-transform: scale3d(1.2, 1.2, 1.2) rotate(-10deg); transform: scale3d(1.2, 1.2, 1.2) rotate(-10deg); } 70% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(5deg); transform: scale3d(0.9, 0.9, 0.9) rotate(5deg); } 90% { -webkit-transform: scale3d(1, 1, 1) rotate(0deg); transform: scale3d(1, 1, 1) rotate(0deg); } } .jumpOutRight { -webkit-animation-name: jumpOutRight; animation-name: jumpOutRight; -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-backface-visibility: hidden; backface-visibility: hidden; } @keyframes jumpOutRight { 0% { -webkit-transform: scale3d(1, 1, 1) rotate(0deg); transform: scale3d(1, 1, 1) rotate(0deg); } 30% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(5deg); transform: scale3d(0.9, 0.9, 0.9) rotate(5deg); } 70% { opacity: 1; -webkit-transform: scale3d(1.2, 1.2, 1.2) rotate(-10deg); transform: scale3d(1.2, 1.2, 1.2) rotate(-10deg); } 100% { opacity: 0; -webkit-transform: scale3d(0.5, 0.5, 0.5) rotate(90deg); transform: scale3d(0.5, 0.5, 0.5) rotate(90deg); } } .jumpOutLeft { -webkit-animation-name: jumpOutLeft; animation-name: jumpOutLeft; -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-backface-visibility: hidden; backface-visibility: hidden; } @keyframes jumpOutLeft { 0% { -webkit-transform: scale3d(1, 1, 1) rotate(0deg); transform: scale3d(1, 1, 1) rotate(0deg); } 30% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-5deg); transform: scale3d(0.9, 0.9, 0.9) rotate(-5deg); } 70% { opacity: 1; -webkit-transform: scale3d(1.2, 1.2, 1.2) rotate(10deg); transform: scale3d(1.2, 1.2, 1.2) rotate(10deg); } 100% { opacity: 0; -webkit-transform: scale3d(0.5, 0.5, 0.5) rotate(-90deg); transform: scale3d(0.5, 0.5, 0.5) rotate(-90deg); } } .rollInLeft { -webkit-animation-name: rollInLeft; animation-name: rollInLeft; -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } @keyframes rollInLeft { 0% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transform: translateX(-100px) rotate(445deg); transform: translateX(-100px) rotate(445deg); opacity: 0; } 30% { opacity: 1; } 50% { -webkit-transform: translateX(20px) rotate(20deg); transform: translateX(20px) rotate(20deg); } 100% { -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); -webkit-transform: translateX(0) rotate(0deg); transform: translateX(0) rotate(0deg); } } .rollInRight { -webkit-animation-name: rollInRight; animation-name: rollInRight; -webkit-animation-duration: 0.9s; animation-duration: 0.9s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } @keyframes rollInRight { 0% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transform: translateX(400px) rotate(-445deg); transform: translateX(400px) rotate(-445deg); opacity: 0; } 30% { opacity: 1; } 50% { -webkit-transform: translateX(-20px) rotate(-20deg); transform: translateX(-20px) rotate(-20deg); } 100% { -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); -webkit-transform: translateX(0) rotate(0deg); transform: translateX(0) rotate(0deg); } } .rollInTop { -webkit-animation-name: rollInTop; animation-name: rollInTop; -webkit-animation-duration: 0.9s; animation-duration: 0.9s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } @keyframes rollInTop { 0% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transform: translateY(-400px) rotate(-445deg); transform: translateY(-400px) rotate(-445deg); opacity: 0; } 30% { opacity: 1; } 50% { -webkit-transform: translateY(20px) rotate(-20deg); transform: translateY(20px) rotate(-20deg); } 100% { -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); -webkit-transform: translateY(0) rotate(0deg); transform: translateY(0) rotate(0deg); } } .rollInBottom { -webkit-animation-name: rollInBottom; animation-name: rollInBottom; -webkit-animation-duration: 0.9s; animation-duration: 0.9s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } @keyframes rollInBottom { 0% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transform: translateY(400px) rotate(-445deg); transform: translateY(400px) rotate(-445deg); opacity: 0; } 30% { opacity: 1; } 50% { -webkit-transform: translateY(-20px) rotate(-20deg); transform: translateY(-20px) rotate(-20deg); } 100% { -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); -webkit-transform: translateY(0) rotate(0deg); transform: translateY(0) rotate(0deg); } } .rollOutLeft { -webkit-animation-name: rollOutLeft; animation-name: rollOutLeft; -webkit-animation-duration: 0.9s; animation-duration: 0.9s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } @keyframes rollOutLeft { 0% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); -webkit-transform: translateX(0) rotate(0deg); transform: translateX(0) rotate(0deg); } 40% { opacity: 1; -webkit-transform: translateX(20px) rotate(-20deg); transform: translateX(20px) rotate(-20deg); } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transform: translateX(-400px) rotate(-445deg); transform: translateX(-400px) rotate(-445deg); } } .rollOutRight { -webkit-animation-name: rollOutRight; animation-name: rollOutRight; -webkit-animation-duration: 0.9s; animation-duration: 0.9s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } @keyframes rollOutRight { 0% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); -webkit-transform: translateX(0) rotate(0deg); transform: translateX(0) rotate(0deg); } 40% { opacity: 1; -webkit-transform: translateX(-20px) rotate(20deg); transform: translateX(-20px) rotate(20deg); } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transform: translateX(400px) rotate(445deg); transform: translateX(400px) rotate(445deg); } } .rollOutTop { -webkit-animation-name: rollOutTop; animation-name: rollOutTop; -webkit-animation-duration: 0.9s; animation-duration: 0.9s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } @keyframes rollOutTop { 0% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); -webkit-transform: translateY(0) rotate(0deg); transform: translateY(0) rotate(0deg); } 40% { opacity: 1; -webkit-transform: translateY(20px) rotate(20deg); transform: translateY(20px) rotate(20deg); } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transform: translateY(-400px) rotate(445deg); transform: translateY(-400px) rotate(445deg); } } .rollOutBottom { -webkit-animation-name: rollOutBottom; animation-name: rollOutBottom; -webkit-animation-duration: 0.9s; animation-duration: 0.9s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } @keyframes rollOutBottom { 0% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); -webkit-transform: translateY(0) rotate(0deg); transform: translateY(0) rotate(0deg); } 40% { opacity: 1; -webkit-transform: translateY(-20px) rotate(-20deg); transform: translateY(-20px) rotate(-20deg); } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transform: translateY(400px) rotate(-445deg); transform: translateY(400px) rotate(-445deg); } } .popIn { -webkit-animation-name: popIn; animation-name: popIn; } @keyframes popIn { 0% { -webkit-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); opacity: 0; } 20% { opacity: 1; } 40% { -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); -webkit-transform: scale3d(1.08, 1.08, 1.08); transform: scale3d(1.08, 1.08, 1.08); } 60% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 80% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 100% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .popInLeft { -webkit-animation-name: popInLeft; animation-name: popInLeft; } @keyframes popInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-200px, 0, 0) scale3d(0.1, 0.1, 0.1); transform: translate3d(-200px, 0, 0) scale3d(0.1, 0.1, 0.1); } 40% { opacity: 1; -webkit-transform: translate3d(0, 0, 0) scale3d(1.08, 1.08, 1.08); transform: translate3d(0, 0, 0) scale3d(1.08, 1.08, 1.08); -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); } 60% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 80% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 100% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .popInRight { -webkit-animation-name: popInRight; animation-name: popInRight; } @keyframes popInRight { 0% { -webkit-transform: translate3d(200px, 0, 0) scale3d(0.1, 0.1, 0.1); transform: translate3d(200px, 0, 0) scale3d(0.1, 0.1, 0.1); opacity: 0; } 40% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); -webkit-transform: translate3d(0, 0, 0) scale3d(1.08, 1.08, 1.08); transform: translate3d(0, 0, 0) scale3d(1.08, 1.08, 1.08); } 60% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 80% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 100% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .popInTop { -webkit-animation-name: popInTop; animation-name: popInTop; } @keyframes popInTop { 0% { -webkit-transform: translate3d(0, -200px, 0) scale3d(0.1, 0.1, 0.1); transform: translate3d(0, -200px, 0) scale3d(0.1, 0.1, 0.1); opacity: 0; } 40% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); -webkit-transform: translate3d(0, 0, 0) scale3d(1.08, 1.08, 1.08); transform: translate3d(0, 0, 0) scale3d(1.08, 1.08, 1.08); } 60% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1); transform: translate3d(0, 0, 0) scale3d(1, 1, 1); } 80% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: translate3d(0, 0, 0) scale3d(1.03, 1.03, 1.03); transform: translate3d(0, 0, 0) scale3d(1.03, 1.03, 1.03); } 100% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1); transform: translate3d(0, 0, 0) scale3d(1, 1, 1); } } .popInBottom { -webkit-animation-name: popInBottom; animation-name: popInBottom; } @keyframes popInBottom { 0% { -webkit-transform: translate3d(0, 200px, 0) scale3d(0.1, 0.1, 0.1); transform: translate3d(0, 200px, 0) scale3d(0.1, 0.1, 0.1); opacity: 0; } 40% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); -webkit-transform: translate3d(0, 0, 0) scale3d(1.08, 1.08, 1.08); transform: translate3d(0, 0, 0) scale3d(1.08, 1.08, 1.08); } 60% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1); transform: translate3d(0, 0, 0) scale3d(1, 1, 1); } 80% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: translate3d(0, 0, 0) scale3d(1.03, 1.03, 1.03); transform: translate3d(0, 0, 0) scale3d(1.03, 1.03, 1.03); } 100% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1); transform: translate3d(0, 0, 0) scale3d(1, 1, 1); } } .popOut { -webkit-animation-name: popOut; animation-name: popOut; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; } @keyframes popOut { 0% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 60% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scale3d(1.08, 1.08, 1.08); transform: scale3d(1.08, 1.08, 1.08); } 80% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } .popOutLeft { -webkit-animation-name: popOutLeft; animation-name: popOutLeft; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; } @keyframes popOutLeft { 0% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0); transform: scale3d(1, 1, 1) translate3d(0, 0, 0); -webkit-transform-origin: left center; transform-origin: left center; } 40% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scale3d(1.08, 1.08, 1.08) translate3d(0, 0, 0); transform: scale3d(1.08, 1.08, 1.08) translate3d(0, 0, 0); } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); -webkit-transform: scale3d(0.5, 0.5, 0.5) translate3d(-200px, 0, 0); transform: scale3d(0.5, 0.5, 0.5) translate3d(-200px, 0, 0); } } .popOutRight { -webkit-animation-name: popOutRight; animation-name: popOutRight; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; } @keyframes popOutRight { 0% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0); transform: scale3d(1, 1, 1) translate3d(0, 0, 0); -webkit-transform-origin: right center; transform-origin: right center; } 40% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scale3d(1.08, 1.08, 1.08) translate3d(0, 0, 0); transform: scale3d(1.08, 1.08, 1.08) translate3d(0, 0, 0); } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); -webkit-transform: scale3d(0.5, 0.5, 0.5) translate3d(200px, 0, 0); transform: scale3d(0.5, 0.5, 0.5) translate3d(200px, 0, 0); } } .popOutTop { -webkit-animation-name: popOutTop; animation-name: popOutTop; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; } @keyframes popOutTop { 0% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0); transform: scale3d(1, 1, 1) translate3d(0, 0, 0); -webkit-transform-origin: top center; transform-origin: top center; } 40% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scale3d(1.08, 1.08, 1.08) translate3d(0, 0, 0); transform: scale3d(1.08, 1.08, 1.08) translate3d(0, 0, 0); } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); -webkit-transform: scale3d(0.5, 0.5, 0.5) translate3d(0, -400px, 0); transform: scale3d(0.5, 0.5, 0.5) translate3d(0, -400px, 0); } } .popOutBottom { -webkit-animation-name: popOutBottom; animation-name: popOutBottom; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; } @keyframes popOutBottom { 0% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0); transform: scale3d(1, 1, 1) translate3d(0, 0, 0); -webkit-transform-origin: bottom center; transform-origin: bottom center; } 40% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scale3d(1.08, 1.08, 1.08) translate3d(0, 0, 0); transform: scale3d(1.08, 1.08, 1.08) translate3d(0, 0, 0); } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); -webkit-transform: scale3d(0.5, 0.5, 0.5) translate3d(0, 400px, 0); transform: scale3d(0.5, 0.5, 0.5) translate3d(0, 400px, 0); } } .flip { -webkit-animation-name: flip; animation-name: flip; } @keyframes flip { from { -webkit-transform: perspective(400px) rotateY(-360deg) scale3d(1, 1, 1); transform: perspective(400px) rotateY(-360deg) scale3d(1, 1, 1); -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); } 50% { -webkit-transform: perspective(400px) rotateY(-180deg) scale3d(1.2, 1.2, 1.2); transform: perspective(400px) rotateY(-180deg) scale3d(1.2, 1.2, 1.2); -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); } to { -webkit-transform: perspective(400px) rotateY(0deg) scale3d(1, 1, 1); transform: perspective(400px) rotateY(0deg) scale3d(1, 1, 1); -webkit-animation-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035); animation-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035); } } .flipInX { -webkit-animation-name: flipInX; animation-name: flipInX; -webkit-animation-duration: 2s; animation-duration: 2s; } @keyframes flipInX { from { opacity: 0; -webkit-transform: perspective(400px) rotateX(90deg) scale3d(1.2, 1.2, 1.2); transform: perspective(400px) rotateX(90deg) scale3d(1.2, 1.2, 1.2); } 50% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); -webkit-transform: perspective(400px) rotateX(-20deg) scale3d(1, 1, 1); transform: perspective(400px) rotateX(-20deg) scale3d(1, 1, 1); } to { -webkit-transform: perspective(400px) rotateX(0deg) scale3d(1, 1, 1); transform: perspective(400px) rotateX(0deg) scale3d(1, 1, 1); } } .flipInY { -webkit-animation-name: flipInY; animation-name: flipInY; -webkit-animation-duration: 2s; animation-duration: 2s; } @keyframes flipInY { from { opacity: 0; -webkit-transform: perspective(400px) rotateY(90deg) scale3d(1.2, 1.2, 1.2); transform: perspective(400px) rotateY(90deg) scale3d(1.2, 1.2, 1.2); } 50% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); -webkit-transform: perspective(400px) rotateY(-20deg) scale3d(1, 1, 1); transform: perspective(400px) rotateY(-20deg) scale3d(1, 1, 1); } to { -webkit-transform: perspective(400px) rotateY(0deg) scale3d(1, 1, 1); transform: perspective(400px) rotateY(0deg) scale3d(1, 1, 1); } } .flipOutX { -webkit-animation-name: flipOutX; animation-name: flipOutX; } @keyframes flipOutX { from { -webkit-transform: perspective(400px) rotateX(0deg) scale3d(1, 1, 1); transform: perspective(400px) rotateX(0deg) scale3d(1, 1, 1); } 60% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); -webkit-transform: perspective(400px) rotateX(-30deg) scale3d(1, 1, 1); transform: perspective(400px) rotateX(-30deg) scale3d(1, 1, 1); } to { opacity: 0; -webkit-transform: perspective(400px) rotateX(90deg) scale3d(1.2, 1.2, 1.2); transform: perspective(400px) rotateX(90deg) scale3d(1.2, 1.2, 1.2); } } .flipOutY { -webkit-animation-name: flipOutY; animation-name: flipOutY; } @keyframes flipOutY { from { -webkit-transform: perspective(400px) rotateY(0deg) scale3d(1, 1, 1); transform: perspective(400px) rotateY(0deg) scale3d(1, 1, 1); } 60% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); -webkit-transform: perspective(400px) rotateY(-30deg) scale3d(1, 1, 1); transform: perspective(400px) rotateY(-30deg) scale3d(1, 1, 1); } to { opacity: 0; -webkit-transform: perspective(400px) rotateY(90deg) scale3d(1.2, 1.2, 1.2); transform: perspective(400px) rotateY(90deg) scale3d(1.2, 1.2, 1.2); } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); } @keyframes fadeInRight { 0% { -webkit-transform: translate3d(400px, 0, 0); transform: translate3d(400px, 0, 0); opacity: 0; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); } @keyframes fadeInLeft { 0% { -webkit-transform: translate3d(-400px, 0, 0); transform: translate3d(-400px, 0, 0); opacity: 0; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } .fadeInTop { -webkit-animation-name: fadeInTop; animation-name: fadeInTop; -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); } @keyframes fadeInTop { 0% { -webkit-transform: translate3d(0, -400px, 0); transform: translate3d(0, -400px, 0); opacity: 0; } 50% { opacity: 0.2; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } .fadeInBottom { -webkit-animation-name: fadeInBottom; animation-name: fadeInBottom; -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); } @keyframes fadeInBottom { 0% { -webkit-transform: translate3d(0, 400px, 0); transform: translate3d(0, 400px, 0); opacity: 0; } 50% { opacity: 0.2; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); } @keyframes fadeOutLeft { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } 100% { -webkit-transform: translate3d(-400px, 0, 0); transform: translate3d(-400px, 0, 0); opacity: 0; } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); } @keyframes fadeOutRight { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } 100% { -webkit-transform: translate3d(400px, 0, 0); transform: translate3d(400px, 0, 0); opacity: 0; } } .fadeOutTop { -webkit-animation-name: fadeOutTop; animation-name: fadeOutTop; -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); } @keyframes fadeOutTop { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } 40% { opacity: 0.2; } 100% { -webkit-transform: translate3d(0, -300px, 0); transform: translate3d(0, -300px, 0); opacity: 0; } } .fadeOutBottom { -webkit-animation-name: fadeOutBottom; animation-name: fadeOutBottom; -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); } @keyframes fadeOutBottom { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } 40% { opacity: 0.2; } 100% { -webkit-transform: translate3d(0, 300px, 0); transform: translate3d(0, 300px, 0); opacity: 0; } } .driveInLeft { -webkit-animation-name: driveInLeft; animation-name: driveInLeft; -webkit-animation-duration: 3s; animation-duration: 3s; } @keyframes driveInLeft { 0% { opacity: 0.5; -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transform: translate3d(-50px, 0, 0); transform: translate3d(-50px, 0, 0); } 30% { opacity: 1; } 60% { -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .driveL { -webkit-animation-name: driveL; animation-name: driveL; -webkit-animation-duration: 2s; animation-duration: 2s; } @keyframes driveL { 0% { opacity: 0.5; -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transform: translate3d(-50px, 0, 0); transform: translate3d(-50px, 0, 0); } 30% { opacity: 1; } 60% { -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .driveInRight { -webkit-animation-name: driveInRight; animation-name: driveInRight; -webkit-animation-duration: 2s; animation-duration: 2s; } @keyframes driveInRight { 0% { opacity: 0.5; -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transform: translate3d(50px, 0, 0); transform: translate3d(50px, 0, 0); } 30% { opacity: 1; } 60% { -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .driveR { -webkit-animation-name: driveR; animation-name: driveR; -webkit-animation-duration: 2s; animation-duration: 2s; } @keyframes driveR { 0% { opacity: 0.5; -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transform: translate3d(50px, 0, 0); transform: translate3d(50px, 0, 0); } 30% { opacity: 1; } 60% { -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .driveInTop { -webkit-animation-name: driveInTop; animation-name: driveInTop; -webkit-animation-duration: 2s; animation-duration: 2s; } @keyframes driveInTop { 0% { opacity: 0.5; -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transform: translate3d(0, -50px, 0); transform: translate3d(0, -50px, 0); } 30% { opacity: 1; } 60% { -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .driveT { -webkit-animation-name: driveT; animation-name: driveT; -webkit-animation-duration: 2s; animation-duration: 2s; } @keyframes driveT { 0% { opacity: 0.5; -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transform: translate3d(0, -50px, 0); transform: translate3d(0, -50px, 0); } 30% { opacity: 1; } 60% { -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .driveInBottom { -webkit-animation-name: driveInBottom; animation-name: driveInBottom; -webkit-animation-duration: 2s; animation-duration: 2s; } @keyframes driveInBottom { 0% { opacity: 0.5; -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transform: translate3d(0, 50px, 0); transform: translate3d(0, 50px, 0); } 60% { -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); -webkit-transform: translate3d(0, 0px, 0); transform: translate3d(0, 0px, 0); } 100% {opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .driveOutLeft { -webkit-animation-name: driveOutLeft; animation-name: driveOutLeft; -webkit-animation-duration: 2s; animation-duration: 2s; } @keyframes driveOutLeft { 0% { -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 30% { -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); -webkit-transform: translate3d(30px, 0, 0); transform: translate3d(30px, 0, 0); } 60% { opacity: 1; } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transform: translate3d(-400px, 0, 0); transform: translate3d(-400px, 0, 0); } } .driveOutRight { -webkit-animation-name: driveOutRight; animation-name: driveOutRight; -webkit-animation-duration: 2s; animation-duration: 2s; } @keyframes driveOutRight { 0% { -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 30% { -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); -webkit-transform: translate3d(-30px, 0, 0); transform: translate3d(-30px, 0, 0); } 60% { opacity: 1; } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transform: translate3d(400px, 0, 0); transform: translate3d(400px, 0, 0); } } .driveOutTop { -webkit-animation-name: driveOutTop; animation-name: driveOutTop; -webkit-animation-duration: 2s; animation-duration: 2s; } @keyframes driveOutTop { 0% { -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 30% { -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); -webkit-transform: translate3d(0, 30px, 0); transform: translate3d(0, 30px, 0); } 60% { opacity: 1; } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transform: translate3d(0, -400px, 0); transform: translate3d(0, -400px, 0); } } .driveOutBottom { -webkit-animation-name: driveOutBottom; animation-name: driveOutBottom; -webkit-animation-duration: 2s; animation-duration: 2s; } @keyframes driveOutBottom { 0% { -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 30% { -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 60% { opacity: 1; } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transform: translate3d(0, 300px, 0); transform: translate3d(0, 300px, 0); } } .spin { -webkit-animation-name: spin; animation-name: spin; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; } @keyframes spin { 0% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: rotateZ(0deg); transform: rotateZ(0deg); -webkit-transform-origin: center center; transform-origin: center center; } 20% { -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transform: rotateZ(-20deg); transform: rotateZ(-20deg); -webkit-transform-origin: center center; transform-origin: center center; } 70% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: rotateZ(380deg); transform: rotateZ(380deg); -webkit-transform-origin: center center; transform-origin: center center; } 100% { -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg); -webkit-transform-origin: center center; transform-origin: center center; } } .spinIn { -webkit-animation-name: spinIn; animation-name: spinIn; -webkit-animation-duration: 2s; animation-duration: 2s; } @keyframes spinIn { 0% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); -webkit-transform: rotateZ(0deg) scale3d(0, 0, 0); transform: rotateZ(0deg) scale3d(0, 0, 0); -webkit-transform-origin: center center; transform-origin: center center; } 50% { opacity: 1; } 70% { -webkit-transform: rotateZ(380deg) scale3d(1, 1, 1); transform: rotateZ(380deg) scale3d(1, 1, 1); -webkit-transform-origin: center center; transform-origin: center center; } 100% { -webkit-transform: rotateZ(360deg) scale3d(1, 1, 1); transform: rotateZ(360deg) scale3d(1, 1, 1); -webkit-transform-origin: center center; transform-origin: center center; } } .spinOut { -webkit-animation-name: spinOut; animation-name: spinOut; -webkit-animation-duration: 2s; animation-duration: 2s; } @keyframes spinOut { 0% { -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); -webkit-transform: rotateZ(0deg) scale3d(1, 1, 1); transform: rotateZ(0deg) scale3d(1, 1, 1); -webkit-transform-origin: center center; transform-origin: center center; } 20% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transform: rotateZ(-20deg) scale3d(1, 1, 1); transform: rotateZ(-20deg) scale3d(1, 1, 1); -webkit-transform-origin: center center; transform-origin: center center; } 30% { opacity: 1; } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); -webkit-transform: rotateZ(360deg) scale3d(0, 0, 0); transform: rotateZ(360deg) scale3d(0, 0, 0); -webkit-transform-origin: center center; transform-origin: center center; } } .swoopInLeft { -webkit-animation-name: swoopInLeft; animation-name: swoopInLeft; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; } @keyframes swoopInLeft { 0% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: scaleX(1.5) translate3d(-400px, 0, 0); transform: scaleX(1.5) translate3d(-400px, 0, 0); } 40% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scaleX(1.2) translate3d(0, 0, 0); transform: scaleX(1.2) translate3d(0, 0, 0); } 65% { -webkit-transform: scaleX(1) translate3d(20px, 0, 0); transform: scaleX(1) translate3d(20px, 0, 0); } 100% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scaleX(1) translate3d(0, 0, 0); transform: scaleX(1) translate3d(0, 0, 0); } } .swoopInRight { -webkit-animation-name: swoopInRight; animation-name: swoopInRight; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; } @keyframes swoopInRight { 0% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: scaleX(1.5) translate3d(400px, 0, 0); transform: scaleX(1.5) translate3d(400px, 0, 0); } 40% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scaleX(1.2) translate3d(0, 0, 0); transform: scaleX(1.2) translate3d(0, 0, 0); } 65% { -webkit-transform: scaleX(1) translate3d(-20px, 0, 0); transform: scaleX(1) translate3d(-20px, 0, 0); } 100% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scaleX(1) translate3d(0, 0, 0); transform: scaleX(1) translate3d(0, 0, 0); } } .swoopInTop { -webkit-animation-name: swoopInTop; animation-name: swoopInTop; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; } @keyframes swoopInTop { 0% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: scaleY(1.5) translate3d(0, -400px, 0); transform: scaleY(1.5) translate3d(0, -400px, 0); } 40% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scaleY(1.2) translate3d(0, 0, 0); transform: scaleY(1.2) translate3d(0, 0, 0); } 65% { -webkit-transform: scaleY(1) translate3d(0, 20px, 0); transform: scaleY(1) translate3d(0, 20px, 0); } 100% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scaleY(1) translate3d(0, 0, 0); transform: scaleY(1) translate3d(0, 0, 0); } } .swoopInBottom { -webkit-animation-name: swoopInBottom; animation-name: swoopInBottom; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; } @keyframes swoopInBottom { 0% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: scaleY(1.5) translate3d(0, 250px, 0); transform: scaleY(1.5) translate3d(0, 250px, 0); } 40% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scaleY(1.2) translate3d(0, 0, 0); transform: scaleY(1.2) translate3d(0, 0, 0); } 65% { -webkit-transform: scaleY(1) translate3d(0, -20px, 0); transform: scaleY(1) translate3d(0, -20px, 0); } 100% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scaleY(1) translate3d(0, 0, 0); transform: scaleY(1) translate3d(0, 0, 0); } } .swoopOutLeft { -webkit-animation-name: swoopOutLeft; animation-name: swoopOutLeft; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; } @keyframes swoopOutLeft { 0% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scaleX(1) translate3d(0, 0, 0); transform: scaleX(1) translate3d(0, 0, 0); } 40% { opacity: 1; -webkit-transform: scaleX(1) translate3d(20px, 0, 0); transform: scaleX(1) translate3d(20px, 0, 0); } 60% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scaleX(1.2) translate3d(0, 0, 0); transform: scaleX(1.2) translate3d(0, 0, 0); } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: scaleX(1.5) translate3d(-400px, 0, 0); transform: scaleX(1.5) translate3d(-400px, 0, 0); } } .swoopOutRight { -webkit-animation-name: swoopOutRight; animation-name: swoopOutRight; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; } @keyframes swoopOutRight { 0% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scaleX(1) translate3d(0, 0, 0); transform: scaleX(1) translate3d(0, 0, 0); } 40% { opacity: 1; -webkit-transform: scaleX(1) translate3d(-20px, 0, 0); transform: scaleX(1) translate3d(-20px, 0, 0); } 60% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scaleX(1.2) translate3d(0, 0, 0); transform: scaleX(1.2) translate3d(0, 0, 0); } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: scaleX(1.5) translate3d(400px, 0, 0); transform: scaleX(1.5) translate3d(400px, 0, 0); } } .swoopOutTop { -webkit-animation-name: swoopOutTop; animation-name: swoopOutTop; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; } @keyframes swoopOutTop { 0% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scaleY(1) translate3d(0, 0, 0); transform: scaleY(1) translate3d(0, 0, 0); } 40% { opacity: 1; -webkit-transform: scaleY(1) translate3d(0, 20px, 0); transform: scaleY(1) translate3d(0, 20px, 0); } 60% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scaleY(1.2) translate3d(0, 0, 0); transform: scaleY(1.2) translate3d(0, 0, 0); } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: scaleY(1.5) translate3d(0, -400px, 0); transform: scaleY(1.5) translate3d(0, -400px, 0); } } .swoopOutBottom { -webkit-animation-name: swoopOutBottom; animation-name: swoopOutBottom; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; } @keyframes swoopOutBottom { 0% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scaleY(1) translate3d(0, 0, 0); transform: scaleY(1) translate3d(0, 0, 0); } 40% { opacity: 1; -webkit-transform: scaleY(1) translate3d(0, -20px, 0); transform: scaleY(1) translate3d(0, -20px, 0); } 60% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scaleY(1.2) translate3d(0, 0, 0); transform: scaleY(1.2) translate3d(0, 0, 0); } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: scaleY(1.5) translate3d(0, 200px, 0); transform: scaleY(1.5) translate3d(0, 200px, 0); } } .fold { -webkit-animation-name: fold; animation-name: fold; } @keyframes fold { 0% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); -webkit-transform: scale3d(1, 0.4, 1); transform: scale3d(1, 0.4, 1); } 60% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); -webkit-transform: scale3d(0.4, 0.4, 1); transform: scale3d(0.4, 0.4, 1); } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); -webkit-transform: scale3d(0.2, 0.2, 0.2); transform: scale3d(0.2, 0.2, 0.2); } } .unfold { -webkit-animation-name: unfold; animation-name: unfold; } @keyframes unfold { 0% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); } 30% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); -webkit-transform: scale3d(0.4, 0.4, 1); transform: scale3d(0.4, 0.4, 1); } 60% { -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); -webkit-transform: scale3d(0.4, 1, 1); transform: scale3d(0.4, 1, 1); } 100% { -webkit-animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .delay-100 { -webkit-animation-delay: .1s; animation-delay: .1s; } .delay-150 { -webkit-animation-delay: 150ms; animation-delay: 150ms; } .duration-100 { -webkit-animation-duration: .1s; animation-duration: .1s; } .duration-150 { -webkit-animation-duration: 150ms; animation-duration: 150ms; } .delay-200 { -webkit-animation-delay: .2s; animation-delay: .2s; } .delay-250 { -webkit-animation-delay: 250ms; animation-delay: 250ms; } .duration-200 { -webkit-animation-duration: .2s; animation-duration: .2s; } .duration-250 { -webkit-animation-duration: 250ms; animation-duration: 250ms; } .delay-300 { -webkit-animation-delay: .3s; animation-delay: .3s; } .delay-350 { -webkit-animation-delay: 350ms; animation-delay: 350ms; } .duration-300 { -webkit-animation-duration: .3s; animation-duration: .3s; } .duration-350 { -webkit-animation-duration: 350ms; animation-duration: 350ms; } .delay-400 { -webkit-animation-delay: .4s; animation-delay: .4s; } .delay-450 { -webkit-animation-delay: 450ms; animation-delay: 450ms; } .duration-400 { -webkit-animation-duration: .4s; animation-duration: .4s; } .duration-450 { -webkit-animation-duration: 450ms; animation-duration: 450ms; } .delay-500 { -webkit-animation-delay: .5s; animation-delay: .5s; } .delay-550 { -webkit-animation-delay: 550ms; animation-delay: 550ms; } .duration-500 { -webkit-animation-duration: .5s; animation-duration: .5s; } .duration-550 { -webkit-animation-duration: 550ms; animation-duration: 550ms; } .delay-600 { -webkit-animation-delay: .6s; animation-delay: .6s; } .delay-650 { -webkit-animation-delay: 650ms; animation-delay: 650ms; } .duration-600 { -webkit-animation-duration: .6s; animation-duration: .6s; } .duration-650 { -webkit-animation-duration: 650ms; animation-duration: 650ms; } .delay-700 { -webkit-animation-delay: .7s; animation-delay: .7s; } .delay-750 { -webkit-animation-delay: 750ms; animation-delay: 750ms; } .duration-700 { -webkit-animation-duration: .7s; animation-duration: .7s; } .duration-750 { -webkit-animation-duration: 750ms; animation-duration: 750ms; } .delay-800 { -webkit-animation-delay: .8s; animation-delay: .8s; } .delay-850 { -webkit-animation-delay: 850ms; animation-delay: 850ms; } .duration-800 { -webkit-animation-duration: .8s; animation-duration: .8s; } .duration-850 { -webkit-animation-duration: 850ms; animation-duration: 850ms; } .delay-900 { -webkit-animation-delay: .9s; animation-delay: .9s; } .delay-950 { -webkit-animation-delay: 950ms; animation-delay: 950ms; } .duration-900 { -webkit-animation-duration: .9s; animation-duration: .9s; } .duration-950 { -webkit-animation-duration: 950ms; animation-duration: 950ms; } .delay-1000 { -webkit-animation-delay: 1s; animation-delay: 1s; } .delay-1250 { -webkit-animation-delay: 1250ms; animation-delay: 1250ms; } .delay-1500 { -webkit-animation-delay: 1.5s; animation-delay: 1.5s; } .delay-1750 { -webkit-animation-delay: 1750ms; animation-delay: 1750ms; } .duration-1000 { -webkit-animation-duration: 2s; animation-duration: 2s; } .duration-1250 { -webkit-animation-duration: 1250ms; animation-duration: 1250ms; } .duration-1500 { -webkit-animation-duration: 1.5s; animation-duration: 1.5s; } .duration-1750 { -webkit-animation-duration: 1750ms; animation-duration: 1750ms; } .delay-2000 { -webkit-animation-delay: 2s; animation-delay: 2s; } .delay-2250 { -webkit-animation-delay: 2250ms; animation-delay: 2250ms; } .delay-2500 { -webkit-animation-delay: 2.5s; animation-delay: 2.5s; } .delay-2750 { -webkit-animation-delay: 2750ms; animation-delay: 2750ms; } .duration-2000 { -webkit-animation-duration: 2s; animation-duration: 2s; } .duration-2250 { -webkit-animation-duration: 2250ms; animation-duration: 2250ms; } .duration-2500 { -webkit-animation-duration: 2.5s; animation-duration: 2.5s; } .duration-2750 { -webkit-animation-duration: 2750ms; animation-duration: 2750ms; } .delay-3000 { -webkit-animation-delay: 3s; animation-delay: 3s; } .delay-3250 { -webkit-animation-delay: 3250ms; animation-delay: 3250ms; } .delay-3500 { -webkit-animation-delay: 3.5s; animation-delay: 3.5s; } .delay-3750 { -webkit-animation-delay: 3750ms; animation-delay: 3750ms; } .duration-3000 { -webkit-animation-duration: 3s; animation-duration: 3s; } .duration-3250 { -webkit-animation-duration: 3250ms; animation-duration: 3250ms; } .duration-3500 { -webkit-animation-duration: 3.5s; animation-duration: 3.5s; } .duration-3750 { -webkit-animation-duration: 3750ms; animation-duration: 3750ms; } .delay-4000 { -webkit-animation-delay: 4s; animation-delay: 4s; } .delay-4250 { -webkit-animation-delay: 4250ms; animation-delay: 4250ms; } .delay-4500 { -webkit-animation-delay: 4.5s; animation-delay: 4.5s; } .delay-4750 { -webkit-animation-delay: 4750ms; animation-delay: 4750ms; } .duration-4000 { -webkit-animation-duration: 4s; animation-duration: 4s; } .duration-4250 { -webkit-animation-duration: 4250ms; animation-duration: 4250ms; } .duration-4500 { -webkit-animation-duration: 4.5s; animation-duration: 4.5s; } .duration-4750 { -webkit-animation-duration: 4750ms; animation-duration: 4750ms; } .delay-5000 { -webkit-animation-delay: 5s; animation-delay: 5s; } .delay-5250 { -webkit-animation-delay: 5250ms; animation-delay: 5250ms; } .delay-5500 { -webkit-animation-delay: 5.5s; animation-delay: 5.5s; } .delay-5750 { -webkit-animation-delay: 5750ms; animation-delay: 5750ms; } .duration-5000 { -webkit-animation-duration: 5s; animation-duration: 5s; } .duration-5250 { -webkit-animation-duration: 5250ms; animation-duration: 5250ms; } .duration-5500 { -webkit-animation-duration: 5.5s; animation-duration: 5.5s; } .duration-5750 { -webkit-animation-duration: 5750ms; animation-duration: 5750ms; } .duration-6000 { -webkit-animation-duration: 6s; animation-duration: 6s; } .duration-6250 { -webkit-animation-duration: 6250ms; animation-duration: 6250ms; } .duration-6500 { -webkit-animation-duration: 6.5s; animation-duration: 6.5s; } .duration-6750 { -webkit-animation-duration: 6750ms; animation-duration: 6750ms; } .duration-7000 { -webkit-animation-duration: 7s; animation-duration: 7s; } .duration-7250 { -webkit-animation-duration: 7250ms; animation-duration: 7250ms; } .duration-7500 { -webkit-animation-duration: 7.5s; animation-duration: 7.5s; } .duration-7750 { -webkit-animation-duration: 7750ms; animation-duration: 7750ms; } .duration-8000 { -webkit-animation-duration: 8s; animation-duration: 8s; } .duration-8250 { -webkit-animation-duration: 8250ms; animation-duration: 8250ms; } .duration-8500 { -webkit-animation-duration: 8.5s; animation-duration: 8.5s; } .duration-8750 { -webkit-animation-duration: 8750ms; animation-duration: 8750ms; } .duration-9000 { -webkit-animation-duration: 9s; animation-duration: 9s; } .duration-9250 { -webkit-animation-duration: 9250ms; animation-duration: 9250ms; } .duration-9500 { -webkit-animation-duration: 9.5s; animation-duration: 9.5s; } .duration-9750 { -webkit-animation-duration: 9750ms; animation-duration: 9750ms; } .duration-10000 { -webkit-animation-duration: 10s; animation-duration: 10s; } .duration-10250 { -webkit-animation-duration: 10250ms; animation-duration: 10250ms; } .duration-10500 { -webkit-animation-duration: 10.5s; animation-duration: 10.5s; } .duration-10750 { -webkit-animation-duration: 10750ms; animation-duration: 10750ms; } /*# sourceMappingURL=vivify.css.map */ .yidong{-webkit-animation-name: yidong;animation-name: yidong;-webkit-animation-duration:2s;animation-duration: 2s; } @keyframes yidong{ 0%{ top:97px; right:0; opacity:0; } 100%{ top:97px; right:90px; opacity:1; } } .yidong1{-webkit-animation-name: yidong1;animation-name: yidong1;-webkit-animation-duration:2s;animation-duration: 2s; } @keyframes yidong1{ 0%{ top:37px; left:0; opacity:0; } 100%{ top:37px; left:294px; opacity:1; } } .yidong2{-webkit-animation-name: yidong2;animation-name: yidong2;-webkit-animation-duration:2s;animation-duration: 2s; } @keyframes yidong2{ 0%{ top:0px; left:550px; opacity:0; } 100%{ top:110px; left:550px; opacity:1; } } .yidong3{-webkit-animation-name: yidong3;animation-name: yidong3;-webkit-animation-duration:2s;animation-duration: 2s; } @keyframes yidong3{ 0%{ top:50%; left:468px; opacity:0; } 100%{ top:226px; left:468px; opacity:1; } } .rollerLeft{ animation-name: rollerLeft; -webkit-animation-name: rollerLeft; animation-duration: 2s; -webkit-animation-duration: 2s; animation-timing-function: ease; -webkit-animation-timing-function: ease; animation-iteration-count: 1; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } @keyframes rollerLeft { 0% { transform: translateX(200px) rotate(0); opacity: 0; } 100% { transform: translateX(0) rotate(-2turn); opacity: 1; } } @-webkit-keyframes rollerLeft { 0% { -webkit-transform: translateX(200px) rotate(0); opacity: 0; } 100% { -webkit-transform: translateX(0) rotate(-2turn); opacity: 1; } } /*header begin*/ .header{ clear:both; height:auto; min-height:2.08vw; width:100%;position:fixed; z-index:9999; left:0;right:0px; top:0;margin:0 auto;text-align:center;padding:1.6vw 3.65vw;} .head{ clear:both; height:auto; min-height:2.08vw; width:100%;position:fixed; z-index:99999999; left:0;right:0px; top:0;margin:0 auto;text-align:center;padding:1.6vw 3.65vw;transition: all 0.5s ease;} .logo{ float:left;margin-top:0px;width:9.21875vw;height:2.08vw;} .logo img{ display:block; max-width:100%;vertical-align:middle;} .pc_nav{width:auto;text-align:center;margin: 0 auto;display: inline-block;} .pc_nav li{display:inline-block; padding-top:0px; position:relative;} .pc_nav li:last-child{ margin-right:0px;} .pc_nav li a{ color:#b2b2b2; font-size:0.83vw;line-height:2.08vw; display:block; position:relative;padding-left:2.08vw; padding-right:2.08vw;} .pc_nav li:hover a{color:#fff;} .pc_nav li.bg a{color:#fff;} .dnou2{position:absolute; width:200px; top:2.08vw; left:50%; display:none; padding-top:0.78vw; background:#fff;box-shadow:0 0 10px rgba(0,0,0,0.2);-webkit-box-shadow:0 0 10px rgba(0,0,0,0.2);-moz-box-shadow:0 0 10px rgba(0,0,0,0.2); background:rgba(0,0,0,0.6);border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px; transform:translateX(-50%); -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%);} .pc_nav ul li.le{position:relative;} .pc_nav ul li.le .dnou2 a{ display:block; background:none; color:#fff; font-size:0.73vw;padding:0px;line-height:36px;} .pc_nav ul li.le .dnou2 a:hover{ background:none; color:#1aacd6; font-weight:normal;} .dnou2 dl{ border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px; text-align:left; padding:0px 15px 8px; position:relative;} .dnou2 dl:before{content: "";display: block; height:100%; width:1px; background:#e8e8e8; width:1px; position:absolute; left:15px; top:0;} .dnou2 dd{ padding-left:10px; line-height:36px;height:36px;text-align:left;} .Navmeau2Line{ display:block; height:36px; width:1px; position:absolute; left:15px; top:20px; z-index:777;} .Navmeau2Line em{ display:block; float:left; width:1px; height:26px; margin-top:0px; background:#1aacd6;} .dnou2 dd a { color:#3c3c3c; font-size:14px; white-space:nowrap;} .dnou2 dd a:hover{ color:#1aacd6;} .nav-link .Navmeau2 dl a{ padding:0;} .bg .le .dnou2 dl a,.pc_nav .le .dnou2 dl a{ color:#fff;} .pc_m{float:right;margin-top:0px;} .pc_m p{display:inline-block;} .wx{margin-right:1.6vw;} .wx img{vertical-align: bottom;} .zcdl{font-size:1.04vw;line-height:1.6vw;color:#fff;} .zcdl img{vertical-align: middle;} .zcdl img.im2{display:none;} .zcdl a{font-size:0.83vw;line-height:1.25vw;color:#fff;font-style:italic;font-family:Arial;padding:0px 24px;} .head.sticky{background:#fff;} .head.sticky .pc_nav li a{ color:#333;} .head .pc_nav li a{ color:#b2b2b2; } .head .pc_nav li:hover a{ color:#fff; } .head .pc_nav li.bg a{ color:#fff; } .head .pc_nav li .dnou2 dd a { color:#fff;} .head.sticky .pc_nav li .dnou2 dd a { color:#fff;} .head.sticky .pc_nav li:hover a{color:#1aacd6;} .head.sticky .pc_nav li .dnou2 dd:hover a { color:#1aacd6;} .head .pc_nav li .dnou2 dd:hover a { color:#1aacd6;} .head.sticky .pc_nav li.bg a{color:#1aacd6;} .head.sticky .zcdl{color:#333;} .head.sticky .zcdl a{color:#333;} .head.sticky .zcdl img.im1{display:none;} .head.sticky .zcdl img.im2{display:inline-block;} @media(max-width:1440px){ .dnou2{width:110px;} .Navmeau2Line em{margin-top:-2px;} } @media(max-width:1024px){ .pc_nav{display:none;} .box{min-height:60px;} .logo{width:auto;height:auto;} .pc_m {margin-top:8px;margin-right:50px;} .header,.head{min-height:40px;padding: 15px 30px;} .zcdl{font-size:16px;line-height:24px;} .zcdl a{font-size:16px;line-height:24px;} } @media(max-width:768px){ .zcdl a{font-size:14px;line-height:24px;} .wx{margin-right: 10px;} .pc_m {margin-right:40px;} .header,.head{min-height:40px;padding: 15px 15px;} } @media(max-width:414px){ .pc_m {margin-top:8px;margin-right:40px;} .zcdl a{padding: 0px 10px;font-size:14px;} } /*header end*/ /*fotter begin*/ .footer{background:#333;width:100%; height:auto; overflow:hidden;padding:0vw 3.65vw;} .foot_t{border-bottom:1px solid #4b4b4b;padding:3vw 0px;clear:both;width:100%;height:auto;overflow:hidden;} .foot_t ul{float:left;margin-right:6.9vw;} .foot_t h2{margin-bottom:20px;} .foot_t h2 a{font-size:16px;line-height:24px;color:#ffffff;} .foot_t li{margin-bottom:10px;} .foot_t li a{font-size:14px;line-height:24px;color:#999999;} .foot_t li:hover a{color:#3265b0;} .foot_gz{} .foot_gz h2{font-size:18px;line-height:30px;color:#fff;margin-bottom:20px;text-align:left;} .foot_gz p{float:left;margin-right:20px;} .foot_gz p.bg{margin-right:0px;} .foot_gz p img{vertical-align:middle;} .foot_gz p span{display:block;text-align:center;padding-top:10px;color:#fff;} .foot_lx{} .foot_lx p{font-size:14px;line-height:32px;color:#999;font-family:Arial;} .foot_lx p.bg{font-size:24px;color:#3265b0;} .foot_lx p img{vertical-align:middle;margin-right:20px;} .foot_lx p:hover{color:#3265b0;} .foot_t ul.bg_gz{margin-right:0px;} .foot_b{padding:20px 0px;clear:both;} .foot_b span{display:inline-block;text-align:left;font-size:14px;line-height:24px;color:#999999;} .foot_b span a{font-size:14px;line-height:24px;color:#999999;} .foot_b font{display:inline-block;float:right;font-size:14px;line-height:24px;color:#999999;} .foot_b font a{font-size:14px;line-height:24px;color:#999999;} @media(max-width:1680px){ .foot_t ul{margin-right:5.6vw;} } @media(max-width:1600px){ .foot_t ul{margin-right:5.1vw;} } @media(max-width:1440px){ .foot_t ul{margin-right:3.9vw;} } @media(max-width:1400px){ .foot_t ul{margin-right:3.8vw;} } @media(max-width:1366px){ .foot_t ul{margin-right:3.4vw;} } @media(max-width:1366px){ .foot_t ul{margin-right:3.3vw;} } @media(max-width:1280px){ .foot_t ul{margin-right:2.6vw;} } @media(max-width:1024px){ .footer{padding: 15px 30px 0px;} .foot_t ul{margin-right:0px;width:20%;min-height:170px;} .foot_t h2{margin-bottom:10px;} .foot_t li{margin-bottom:0px;} .foot_t ul:nth-child(6){float:left;width:60%;margin-right:0px;} .foot_t ul:nth-child(7){float:right;width:40%;margin-right:0px;} } @media(max-width:768px){ .footer{padding: 15px 15px 0px;} .foot_t ul:nth-child(6){float:left;width:64%;margin-right:0px;} .foot_t ul:nth-child(7){float:right;width:36%;margin-right:0px;} } @media(max-width:414px){ .foot_t ul:nth-child(6){width:100%;} .foot_t ul:nth-child(7){width:100%;margin-top:15px;} .foot_b{padding:15px 0px;} .foot_b span a{display:block;} .foot_b font{float:none;text-align:left;} .foot_t h2 a{font-size:14px;line-height:24px;} } @media(max-width:375px){ } @media(max-width:360px){ } /*fotter end*/ .dezzz{display: none;width:18vw;position: absolute;top: 5.19vw;right: 5.2vw;z-index:99999999;padding: 0.52vw; background:rgba(255,255,255,0.5);} .dezzz .s1{width:100%;font-size:0.83vw;line-height: 2.5vw;padding:0px 0.52vw;padding-right:50px;border:0px;} .dezzz .s2{position:absolute;right:20px;bottom:38%;} @media(max-width:1024px){ .dezzz{width:300px;position: absolute;top: 70px;right:30px;padding:10px;} .dezzz .s1{width:100%;font-size:14px;line-height:30px;padding:0px 15px;padding-right:30px;border:0px;} .dezzz .s2{position:absolute;right:20px;bottom:38%;} } @media(max-width:768px){ .dezzz{width:300px;position:absolute;top:70px;right:15px;padding:10px;} .dezzz .s1{width:100%;font-size:14px;line-height:30px;padding:0px 15px;padding-right:30px;border:0px;} .dezzz .s2{position:absolute;right:20px;bottom:38%;} } .sticky .dezzz{ background:rgba(50,101,175,0.5);} .page-dot{position:fixed;left:3.65vw;top:40%;overflow:hidden;z-index:100} .page-dot li{width:4vw;display:block;margin:0.26vw 0;position:relative;color:#fff;text-align:right} .page-dot li em{font-size:0.73vw;line-height:1.25vw;color:#fff;opacity:0;font-family:Arial;} .page-dot li:before{content:"";width:1.6vw;height:1px;background-color:rgba(255,255,255,0.3);position:absolute;left:0px;top:50%;transition:all 0.3s} .page-dot li.active{color:#fff} .page-dot li.active em{opacity:1} .page-dot li.active:before{width:2.7vw;height:0.15625vw;background-color:#fff} .page-rb{width:2.34375vw;height:11.98vw;position:fixed;right:3.13vw;bottom:3.54vw;z-index:100} .nav-list{position:fixed;right:5.46875vw;top:3.13vw;z-index:100} .nav-list li{float:left;margin:0 1.6vw} .nav-list li a{font-size:0.94vw;color:#fff} @media(max-width:1024px){ .page-dot{left:0px;} .page-dot li{width:50px;margin:0px;} .page-dot li em{font-size:14px;line-height:24px;} .page-dot li:before{width:15px;top:46%;} .page-dot li.active:before{width:30px;height:3px;} .page-rb{width:30px;height:200px;right:50px;bottom:68px;} .nav-list{right:120px;top:22px;} .nav-list li{margin:0 30px} .nav-list li a{font-size:18px;} } @media(max-width:768px){ .page-dot li{width:40px;} .page-dot li em{font-size:12px;line-height:24px;} .page-rb{width:20px;height:200px;right:50px;bottom:68px;} .page-dot li.active:before{width:20px;} } @media(max-width:414px){ } #pages{width:100%;height:100vh} #pages{position:absolute;top:0;left:0;width:100%;height:100vh!important;overflow:hidden;background:#000000} .page{position:absolute;top:0;left:0;width:100%;height:100%} .panel{width:100%;height:100%;position:relative;overflow:hidden} .page1 .panel{background:url(../tu/banner1.jpg) center center no-repeat;background-size:cover} .page2 .panel{background:url(../tu/banner2.jpg)center center no-repeat;background-size:cover} .page3 .panel{background:url(../tu/banner3.jpg) top center no-repeat;background-size:cover} .page4 .panel{background:url(../tu/banner4.jpg) top center no-repeat;background-size:cover} .panel1-text{position:absolute;right:6.25vw;bottom:0vw;padding-top:8.6vw;height:8.59vw;transition:all 0.5s ease-in-out;transition-delay:0.2s} .panel1-text p{font-size:2.08vw;line-height:2.8125vw;color:#fff;text-align:right;margin-bottom:0.78vw;overflow:hidden} .panel1-text .more{margin-top:20px;} .view-current .panel1-text{padding-top:0;bottom:8vw} @media(max-width:1024px){ .panel1-text{right:30px;bottom:0px;padding-top:160px;height:162px;} .panel1-text p{font-size:22px;line-height:32px;margin-bottom:15px;} .view-current .panel1-text{padding-top:0;bottom:70px} } @media(max-width:500px){ .panel1-text{right:15px;left:15px;padding-top:160px;height:162px;} .panel1-text p{font-size:16px;line-height:24px;margin-bottom:10px;} .view-current .panel1-text{padding-top:0;bottom:100px} } .panel2-text{position:absolute;right:6.25vw;bottom:0vw;padding-top:8.6vw;height:8.59vw;transition:all 0.5s ease-in-out;transition-delay:0.2s} .panel2-text p{font-size:2.08vw;line-height:2.8125vw;color:#fff;text-align:right;margin-bottom:0.78vw;overflow:hidden} .panel2-text .more{margin-top:20px;} .view-current .panel2-text{padding-top:0;bottom:12vw} @media(max-width:1024px){ .panel2-text{right:30px;bottom:0px;padding-top:160px;height:162px;} .panel2-text p{font-size:22px;line-height:32px;margin-bottom:15px;} .view-current .panel2-text{padding-top:0;bottom:70px} } @media(max-width:500px){ .panel2-text{right:15px;left:15px;padding-top:160px;height:162px;} .panel2-text p{font-size:16px;line-height:24px;margin-bottom:15px;} .view-current .panel2-text{padding-top:0;bottom:100px} } .panel3-text{position:absolute;left:0px;right:0px;top:15%;margin:0 auto;text-align:center} .panel4-text{position:absolute;left:0px;right:0px;top:15%;margin:0 auto;text-align:center} @media(max-width:1024px){ .panel3-text{top:10%;} .panel4-text{top:10%;} } @media(max-width:768px){ .panel3-text{top:100px;} .panel4-text{top:100px;} } @media(max-width:414px){ .panel3-text{top:100px;} .panel4-text{top:80px;} } .more{width:3.75vw;height:1.25vw;border:1px solid #fff;border-radius:0.52vw;float:right;position:relative;z-index:0;} .more a{font-size:0.625vw;line-height:1.25vw;color:#fff;font-weight:bold;display:block;text-align:center;position:relative;z-index:1;} .more:after{content:'';position:absolute;top:-1px;left:-1.5px;width:0;height:1.2vw;border-radius:0.52vw;transition: all 0.5s ease; z-index:0;} .more:hover:after{width:3.8vw;border:1px solid #fff;background:#fff;} .more:hover a{color:#3265b0} .more1{width:3.75vw;height:1.25vw;border:1px solid #999999;border-radius:0.52vw;float:right;position:relative;z-index:0;} .more1 a{font-size:0.625vw;line-height:1.25vw;color:#999999;font-weight:bold;display:block;text-align:center;position:relative;z-index:1;} .more1:after{content:'';position:absolute;top:-1px;left:-1px;width:0;height:1.2vw;border-radius:0.52vw;transition: all 0.5s ease; z-index:0;} .more1:hover:after{width:3.75vw;border:1px solid #3265b0;background:#3265b0;} .more1:hover a{color:#fff;} @media(max-width:1440px){ .more{width:4.8vw;height:1.5vw;} .more a{font-size:0.625vw;line-height:1.45vw;} .more:after{height:1.4vw;} .more:hover:after{width:4.75vw;} .more1{width:4.8vw;height:1.5vw;} .more1 a{font-size:0.625vw;line-height:1.45vw;} .more1:after{height:1.4vw;} .more1:hover:after{width:4.75vw;} } @media(max-width:1024px){ .more{width:70px;height:26px;border-radius:10px;} .more a{font-size:12px;line-height:25px;} .more:after{height:25px;border-radius:10px;} .more:hover:after{width:68px;} .more1{width:70px;height:26px;border-radius:10px;} .more1 a{font-size:12px;line-height:25px;} .more1:after{height:25px;border-radius:10px;} .more1:hover:after{width:68px;} } .sy_new{width:100%;height:auto;vertical-align:middle;padding:0px 12.5vw;} .sy_n{width:100%;height:auto;overflow:hidden;margin-bottom:1.6vw;} .sy_n h2{font-size:1.875vw;line-height:3.4vw;color:#fff;} .sy_m{width:100%;height:auto;overflow:hidden;} .sy_m dl{display:block;width:100%;height:auto;overflow:hidden;} .sy_m dl.bg{margin-right:0px;} .sy_m .time{width:100%;} .sy_m .time span{display:block;font-size:0.73vw;line-height:1.25vw;color:#e5e5e5;margin-bottom:0.52vw;text-align:left;} .sy_m dt{width:100%;height:auto;overflow:hidden;position:relative;min-height:180px;background:#f5f5f5;} .sy_m dt img{width:100%;vertical-align:middle;transition:all 0.8s ease;} .sy_m dl:hover dt img{transform: scale(1.05);-ms-transform:scale(1.05); -moz-transform:scale(1.05); -webkit-transform:scale(1.05); -o-transform:scale(1.05);} .sy_m dt h2{position:absolute;bottom:0px;left:0px;right:0px;margin:0 auto;background:rgba(51,51,51,0.46);padding:0.78vw 1.04vw;color:#fff;font-size:0.94vw;line-height:1.6vw;overflow: hidden;text-overflow: ellipsis; display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;text-align:left;transition: all 0.8s ease;} .sy_m dl:hover h2{background:rgba(26,172,214,0.62);} .sy_m dd{width:100%;height:auto;overflow:hidden;padding:0.78vw 1.04vw;} .sy_m dd p{font-size:0.73vw;line-height:1.25vw;color:#fff;overflow: hidden;text-overflow: ellipsis; display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;text-align:left;} .boe{position:relative; width:100%; height:1.6vw;margin-bottom:3vw;} .boe a{display:inline-block;font-size:0.625vw;line-height:1.875vw;color:#fff;font-weight:bold;position: relative;left: 0px;right: 0px;top: 0px;} @media(max-width:1024px){ .sy_new{padding:0px 80px;} .sy_n{margin-bottom:20px;} .sy_n h2{font-size:22px;line-height:32px;} .sy_m .time span{font-size:14px;line-height:24px;margin-bottom:10px;} .sy_m dt h2{padding:15px 15px;font-size:16px;line-height:26px;} .sy_m dd{padding:15px 15px;} .sy_m dd p{font-size:14px;line-height:24px;} .boe{height:30px;margin-bottom:30px;} .boe a{font-size:12px;line-height:22px;} } @media(max-width:768px){ .sy_new{padding:0px 50px;} .sy_m dt h2{padding:5px 10px;font-size:15px;line-height:24px;} .sy_m dd{padding:5px 0px;} .boe{margin-bottom:20px;} .sy_m .time span{margin-bottom:0px;} .sy_n h2{font-size:18px;line-height:26px;} } @media(max-width:414px){ } .sy_jr{width:100%;height:auto;vertical-align:middle;padding:0px 12.5vw;text-align:left;} .syjr_a{float:left;width:50%;min-height:18.2vw;border-right:1px solid rgba(160,160,160,0.7);border-bottom:1px solid rgba(160,160,160,0.7);padding-top:3vw;padding-right:13vw;} .syjr_a h2{font-size:1.875vw;line-height:2.08vw;color:#fff;margin-bottom:1.6vw;} .syjr_a p{font-size:0.83vw;line-height:1.6vw;color:#fff;} .syjr_a .more{float:left;margin-top:1.04vw;} .syjr_b{float:right;width:50%;min-height:18.2vw;border-bottom:1px solid rgba(160,160,160,0.7);padding-top:3vw;padding-left:13vw;} .syjr_b h2{font-size:0.94vw;line-height:1.6vw;color:#fff;margin-bottom:1.04vw;text-align:left;} .syjr_b p{float:left;margin-right:1.04vw;} .syjr_b p img{vertical-align:middle;} .syjr_b p span{display:block;text-align:center;padding-top:10px;color:#fff;} .syjr_c{float:left;width:50%;min-height:18.2vw;border-right:1px solid rgba(160,160,160,0.7);padding-top:3.65vw;padding-right:13vw;} .syjr_c p{font-size:0.83vw;line-height:2.08vw;color:#fff;font-family:Arial;} .syjr_c p img{vertical-align:middle;margin-right:1.04vw;} .syjr_c p:hover{color:#3265b0;} .syjr_d{float:right;width:50%;min-height:18.2vw;padding-top:3.65vw;padding-left:13vw;} .syjr_d p{font-size:0.73vw;line-height:1.25vw;color:#e5e5e5;margin-top:2.08vw;} .syjr_d p a{font-size:0.73vw;line-height:1.25vw;color:#e5e5e5;} .syjr_d h4{font-size:0.73vw;line-height:1.25vw;color:#e5e5e5;margin-top:2.08vw;} .syjr_d h4 a{font-size:0.73vw;line-height:1.25vw;color:#e5e5e5;} @media(max-width:1440px){ .syjr_a{padding-top:2.5vw;padding-right:10vw;} .syjr_b{padding-top:2.5vw;padding-left:10vw;} .syjr_c{min-height:15vw;padding-top:3.5vw;padding-right:10vw;} .syjr_d{min-height:15vw;padding-top:3.5vw;padding-left:10vw;} } @media(max-width:1024px){ .sy_jr{padding:0px 60px;} .syjr_a{width:50%;min-height:280px;padding-top:50px;padding-right:50px;} .syjr_b{width:50%;min-height:280px;padding-top:50px;padding-left:50px;} .syjr_c{width:50%;min-height:200px;padding-top:50px;padding-right:50px;} .syjr_d{width:50%;min-height:200px;padding-top:50px;padding-left:50px;} .syjr_a h2{font-size:22px;line-height:32px;margin-bottom:15px;} .syjr_a p{font-size:14px;line-height:24px;} .syjr_a .more{margin-top:15px;} .syjr_b h2{font-size:16px;line-height:26px;margin-bottom:10px;} .syjr_b p{margin-right:15px;} .syjr_b p span{padding-top:10px;} .syjr_c p{font-size:14px;line-height:28px;} .syjr_c p img{margin-right:10px;} .syjr_d p{font-size:14px;line-height:24px;margin-top:20px;} .syjr_d p a{display:block;font-size:14px;line-height:24px;} .syjr_d h4{font-size:14px;line-height:24px;margin-top:10px;} .syjr_d h4 a{font-size:14px;line-height:24px;} } @media(max-width:768px){ .syjr_a{width:50%;min-height:280px;padding-top:30px;padding-right:30px;} .syjr_b{width:50%;min-height:280px;padding-top:30px;padding-left:30px;} .syjr_c{width:50%;min-height:200px;padding-top:50px;padding-right:30px;} .syjr_d{width:50%;min-height:200px;padding-top:50px;padding-left:30px;} } @media(max-width:414px){ .sy_jr{padding:20px 15px 0px 45px;} .syjr_a{width:100%;min-height:auto;padding-top:0px;padding-right:0px;border:none;} .syjr_b{width:100%;min-height:auto;padding-top:15px;padding-left:0px;border:none;} .syjr_c{width:100%;min-height:auto;padding-top:15px;padding-right:0px;border:none;} .syjr_d{width:100%;min-height:auto;padding-top:15px;padding-left:0px;border:none;} .syjr_a h2{font-size:16px;line-height:24px;margin-bottom:5px;} .syjr_a p{font-size:14px;line-height:24px;overflow: hidden;text-overflow: ellipsis; display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2; } .syjr_d p,.syjr_d h4{margin-top:0px;} .syjr_b p span{padding-top:0px;font-size:14px;line-height:24px;} .syjr_a .more{margin-top:10px;} .syjr_b h2{font-size:16px;line-height:24px;margin-bottom:5px;} } @media(max-width:375px){ .sy_jr{padding:0px 15px 0px 45px;} .syjr_b{padding-top:10px;} .syjr_c{padding-top:10px;} .syjr_d{padding-top:10px;} } /*****新闻 begin*****/ .main_er{width:100%;height:auto;overflow:hidden;} .bann{width:100%;height:auto;overflow:hidden;position:relative;min-height:31.25vw;} .bann img{width:100%;vertical-align:middle;} .dw_ban{position:absolute;right:12.5vw;bottom:5.2vw;text-align:right;} .dw_ban h2{font-size:36px;line-height:72px;color:#fff;margin-bottom:25px;} .dw_ban p{font-size:36px;line-height:54px;color:#fff;} .news{width:100%;height:auto;overflow:hidden;} .new_nav{width:100%;height:auto;margin:0 auto;text-align:center;border-bottom:2px solid #e6e6e6;font-size:0;} .new_nav p{display:inline-block;padding:10px 30px;position:relative;} .new_nav p a{font-size:16px;line-height:38px;color:#333333;} .new_nav p.bg:after{content:'';position:absolute;bottom:-2px;left:0px;right:0px;margin:0 auto;text-align:center;width:100%;height:2px;background:#3265b0;} .new_nav p.bg a{color:#3265b0;} .new_nav p:hover:after{content:'';position:absolute;bottom:-2px;left:0px;right:0px;margin:0 auto;text-align:center;width:100%;height:2px;background:#3265b0;} .new_nav p:hover a{color:#3265b0;} .new{width:100%;height:auto;overflow:hidden;background:url(../tu/tu5.jpg)no-repeat center center;background-size:cover;} .new_nr{width:100%;height:auto;overflow:hidden;padding:5.2vw 12.5vw;} .new_nr dl{width:100%;height:auto;overflow:hidden;padding:30px;background:#fff;margin-bottom:75px;} .new_nr dt{float:left;width:31.37%;} .new_nr dt img{vertical-align:middle;width:100%;} .new_nr dd{float:right;width:65%;margin-top:40px;} .new_nr dd h2{ height:auto; overflow:hidden; margin-bottom:0px;} .new_nr dd span{ float:left; display:block; width:80%;color:#262626; font-size:18px; line-height:30px; float:left;transition: all 0.5s ease;overflow: hidden;text-overflow: ellipsis; display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;} .new_nr dd font{ float:right; color:#333333; font-size:30px; line-height:30px; text-align:right;transition: all 0.5s ease;} .new_nr dd font i{ display:block; color:#333333; font-size:14px;} .new_nr dd p{font-size:16px;line-height:30px;color:#666666;margin-right:180px;overflow: hidden;text-overflow: ellipsis; display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;text-align:justify;} .new_nr dl:hover{box-shadow:0px 0px 30px rgba(187,186,186,0.5)} .new_nr dl:hover dd span{color:#3265b0;} .new_nr dl:hover dd font{color:#3265b0;} .new_nr dl:hover dd font i{color:#3265b0;} .new_nr dl .more1{width:75px;height:24px;border:1px solid #999999;border-radius:10px;float:right;transition: all 0.5s ease;} .new_nr dl .more1 a{font-size:12px;line-height:22px;color:#999999;font-weight:bold;display:block;text-align:center;} .new_nr dl:hover .more1{border:1px solid #3265b0;background:#3265b0;} .new_nr dl:hover .more1 a{color:#fff;} .new_nr dl .more1:after{height:0px;} .new_nr dl .more1:hover:after{width:none;border:0px;background:#3265b0;} .new_nr dl .more1:hover a{color:#fff;} .fy{width:100%;height:auto;overflow:hidden;margin:0 auto; text-align:center;} .fy span{display:inline-block;margin:0px 5px;} .fy span img{vertical-align:middle;width:100%;} .fy a{display:inline-block;width:26px;height:26px;border-radius:50%;background:none;color:#333;font-size:12px;line-height:26px;font-family:Arial;margin:0px 5px;} .fy a.curr{display:inline-block;width:26px;height:26px;border-radius:50%;background:#3265b0;color:#fff;font-size:12px;line-height:26px;font-family:Arial;margin:0px 5px;} .fy a.next{width:26px;height:26px;background: url(../images/tu8.png)no-repeat center center;background-size:cover;} .fy a.prev{width:26px;height:26px;background: url(../images/tu7.png)no-repeat center center;background-size:cover;} @media(max-width:414px){ .fy span{margin:0px 3px;} .fy a{width:20px;height:20px;line-height:20px;margin:0px 3px;} .fy a.curr{width:20px;height:20px;line-height:20px;margin:0px 3px;} .fy a.next{width:20px;height:20px;} .fy a.prev{width:20px;height:20px;} } @media(max-width:1440px){ .dw_ban{right:6.25vw;} .dw_ban h2{font-size:28px;line-height:40px;margin-bottom:20px;} .dw_ban p{font-size:24px;line-height:40px;} .new_nr{padding:3.65vw 6.25vw;} .new_nr dl{padding:30px;margin-bottom:50px;} .new_nr dd{margin-top:30px;} .new_nr dd h2{ min-height:auto} .new_nr dd span{font-size:18px; line-height:28px;} .new_nr dd font{font-size:30px; line-height:30px;} .new_nr dd font i{font-size:14px;} .new_nr dd p{font-size:14px;line-height:26px;margin-right:180px;} } @media(max-width:1280px){ .new_nr dd{margin-top:20px;} } @media(max-width:1024px){ .bann{min-height:350px;} .dw_ban{right:30px;left:30px;} .dw_ban h2{font-size:20px;line-height:30px;margin-bottom:10px;} .dw_ban p{font-size:20px;line-height:30px;} .new_nav p{padding:8px 20px;} .new_nav p a{font-size:16px;line-height:24px;} .new_nr{padding:30px 30px;} .new_nr dl{padding:15px;margin-bottom:30px;} .new_nr dd{margin-top:10px;} .new_nr dd span{font-size:18px; line-height:28px;} .new_nr dd font{font-size:22px; line-height:24px;} .new_nr dd font i{font-size:14px;} .new_nr dd p{font-size:14px;line-height:26px;margin-right:140px;} } @media(max-width:768px){ .bann{min-height:300px;} .new_nr{padding:30px 15px;} .dw_ban{right:15px;left:15px;} .dw_ban h2{font-size:18px;line-height:30px;} .dw_ban p{display:inline;font-size:16px;line-height:30px;text-align:justify;} .new_nr dt{float:none;width:100%;} .new_nr dd{float:none;width:100%;} .new_nr dd h2{margin-bottom:10px;} .new_nr dd span{font-size:16px; line-height:28px;overflow: hidden;text-overflow: ellipsis; display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;} .new_nr dd font{font-size:20px; line-height:20px;margin-top: 5px;} .new_nr dd font i{font-size:14px;} .new_nr dd p{font-size:14px;line-height:24px;margin-right:0px;} .new_nr dl .more1{margin-top:10px;} .new_nr dl{margin-bottom:15px;} } @media(max-width:414px){ .dw_ban p{font-size:14px;line-height:24px;} .dw_ban h2{font-size:16px;line-height:24px;} .new_nav p{padding:8px 9px;} } @media(max-width:375px){ .bann{min-height:260px;} .new_nav p{padding:8px 5px;} } @media(max-width:360px){ .new_nav p{padding:8px 3px;} } /*****新闻 end*****/ /****新闻详情 begin****/ .new_xq{width:100%;height:auto;overflow:hidden;padding:0px 6.25vw;} .new_xq p{fontsize:14px;line-height:24px;color:#333333;margin-bottom:20px;} .new_xq img{width:100%;vertical-align:middle;margin-bottom:20px;} .fyfy{clear:both;width:100%;height:auto;overflow:hidden;position:relative;margin-top:40px;} .news_sx{clear:both;width:100%;height:auto;overflow:hidden;} .news_sx p{margin-bottom:0px;} .news_sx p a{display:block;font-size:14px;line-height:28px;color:#808080;} .fh{font-size:14px;line-height:28px;color:#333;border:1px solid #c9c9c9;min-width:100px;padding:0px 10px;border-radius:10px;position: absolute;top:0px;right:0px;z-index:9999;cursor:pointer;text-align:center;} .fh:hover{color:#fff;background:#3265b0;border:1px solid #3265b0;} .news_sx p:hover a{color:#3265b0;} @media(max-width:1440px){ .new_xq{padding:0px 3.13vw;} } @media(max-width:1024px){ .new_xq{padding:0px 0px;} .new_xq p{fontsize:14px;line-height:24px;margin-bottom:10px;} .news_sx p{margin-bottom:0px;} .new_xq img{margin-bottom:10px;} .fyfy{margin-top:30px;} .news_sx p a{font-size:14px;line-height:24px;} .fh{position:inherit;width:80px;margin-top:10px;} } /*******新闻详情 end*********/ /*****临床试验 begin********/ .lcsy_t{width:53%;margin:0 auto;text-align:center;} .lcsy_t h2{font-size:18px;line-height:30px;color:#333333;} .lcsy_m{width:100%;height:auto;overflow:hidden;margin-top:65px;} .lcsy_m table{width:100%;margin:0 auto;table-layout: fixed;border-collapse:collapse; } .lcsy_m table tr{width:100%;height:60px;overflow:hidden;background:#fff;font-size:0;} .lcsy_m table tr.bg{background:#3265b0;} .lcsy_m table tr td{width:12%;font-size:16px;line-height:24px;color:#333333;text-align:center;border:1px solid #cccccc;padding:10px 10px;} .lcsy_m table tr td:nth-child(2){width:24%;} .lcsy_m table tr td:nth-child(3){width:64%;} .lcsy_m table tr.bg td{font-size:18px;line-height:24px;color:#fff;text-align:center;font-weight:bold;} .lcsy_b{width:100%;height:auto;overflow:hidden;margin:0 auto;text-align:center;margin-top:50px;} .lcsy_b h2{font-size:18px;line-height:34px;color:#3265b0;margin-bottom:20px;} .xx_b{width:100%;height:auto;overflow:hidden;margin:0 auto;text-align:center;} .xx_b p{display:inline-block;margin-right:70px;font-size:18x;line-height:24px;color:#333333;} .xx_b p.bg{margin-right:0px;} @media(max-width:1440px){ .lcsy_m table tr td{font-size:14px;line-height:24px;padding:0px 2px;} .lcsy_m table tr.bg td{font-size:16px;line-height:24px;} .lcsy_t{width:60%;margin:0 auto;text-align:center;} .lcsy_t h2{font-size:16px;line-height:28px;} } @media(max-width:1360px){ .lcsy_m{margin-top:40px;} } @media(max-width:1024px){ .lcsy_m table tr td{text-align: justify;} .lcsy_m{margin-top:30px;padding:0px;} .lcsy_m table{width:100%;} .lcsy_m table tr{width:100%;height:40px;} .lcsy_m table tr td{font-size:14px;line-height:24px;padding:0px 10px;} .lcsy_m table tr.bg td{font-size:14px;line-height:24px;} .lcsy_t h2{font-size:14px;line-height:24px;text-align: justify;} .lcsy_b h2{font-size:16px;line-height:24px;margin-bottom:20px;} .xx_b p{display:block;margin-right:0px;} .lcsy_t{width:100%;} .lcsy_b{margin-top:30px;} .xx_b p{font-size:14px;line-height:24px;} } @media(max-width:768px){ .lcsy_m{margin-top:15px;padding:0px 0px;} } @media(max-width:414px){ .lcsy_m table tr td{font-size:14px;line-height:24px;padding:0px 5px;} .lcsy_m table tr.bg td{font-size:14px;line-height:24px;} .lcsy_b h2{font-size:16px;line-height:24px;margin-bottom:10px;} .lcsy_m table tr td{width:14%;} .lcsy_m table tr td:nth-child(2){width:24%;} .lcsy_m table tr td:nth-child(3){width:62%;} } /******临床试验 end*******/ /*****加入我们 begin******/ .jrwm{width:100%; height:auto; overflow:hidden;box-shadow:0px 0px 15px #d3d3d3;} .menuTitle3{cursor:pointer;width:100%; height:60px; background:url(../images/tu10.png) no-repeat 98% center #fff;border-bottom:1px solid #cccccc; color:#666666; font-family:"Microsoft YaHei"; font-size:18px; padding:0 67px 0 39px; line-height:60px;} .jrwm:last-child{border-bottom:none;} .menuTitle3 span{ float:left; display:block; width:80%;overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:18px; color:#3265b0;} .menuTitle3 em{ float:right; color:#666666; font-size:14px;} .activeTitle3{cursor:pointer;width:100%; height:60px; background:url(../images/tu9.png) no-repeat 98% center #3265b0; border-bottom:none; color:#666666; font-family:"Microsoft YaHei"; font-size:18px; padding: 0 67px 0 39px; line-height:60px;} .activeTitle3 span{ float:left; display:block; width:80%;overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:18px; color:#fff;} .activeTitle3 em{ float:right; color:#fff; font-size:14px;} .menuContent3{width:100%; height:auto; overflow:hidden; display:none; padding:35px; background:#fff; border-bottom:1px solid #cccccc;} .cwzj_t{height:auto; overflow:hidden; border-bottom:1px solid #cccccc; padding-bottom:20px; margin-bottom:30px;} .cwzj_t li{display:inline-block;margin-right:90px; color:#666666; line-height:26px; font-size:16px;} .cwzj_t li em{color:#888888; font-size:16px; margin-left:5px;} .cwzj_b{height:auto; overflow:hidden;} .cwzj_bl{float:left;width:38%;} .cwzj_bl h2{ color:#666666; line-height:26px; font-size:16px; font-weight:bold; margin-bottom:8px;} .cwzj_bl p{ line-height:26px; color:#888888; font-size:14px;} .cwzj_br{float:right;width:62%;} .cwzj_br h2{ color:#666666; line-height:26px; font-size:16px; font-weight:bold; margin-bottom:8px;} .cwzj_br p{ line-height:26px; color:#888888; font-size:14px;} @media(max-width:1280px){ .menuTitle3 span{font-size:16px;} .activeTitle3 span{font-size:16px;} } @media(max-width:1024px){ .cwzj_t li{display:block;width:100%; line-height:24px; font-size:14px;} .cwzj_t li em{font-size:14px;} .menuContent3{padding:15px;} .activeTitle3{padding: 0 50px 0 20px;line-height:40px;height:40px;} .menuTitle3{padding: 0 50px 0 20px;line-height:40px;height:40px;} .cwzj_t {padding-bottom: 10px;margin-bottom: 15px;} .cwzj_bl{float:none;width:100%;margin-bottom:10px;} .cwzj_bl h2{line-height:24px; font-size:14px;margin-bottom:0px;} .cwzj_bl p{ line-height:24px;font-size:14px;} .cwzj_br{float:none;width:100%;} .cwzj_br h2{line-height:24px;font-size:14px;margin-bottom:0px;} .cwzj_br p{line-height:24px;font-size:14px;} } @media(max-width:768px){ } @media(max-width:414px){ } @media(max-width:360px){ } @media(max-width:320px){ .cwzj_t li{ float:left; width:100%; color:#666666; line-height:35px; font-size:14px;} .menuTitle3 span{ float:left; display:block; width:67%;overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:14px; color:#666;} .activeTitle3 span{ float:left; display:block; width:67%;overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:14px; color:#fff;} } /*******加入我们 end********/ /********技术平台 begin*****/ .cpcp{width:100%;height:auto;overflow:hidden;margin:0 auto;text-align:center;} .cpcp h2{font-size:1.6vw;line-height:2.5vw;color:#3265b0;margin-bottom:30px;} .cpcp p{font-size:16px;line-height:30px;color:#4c4c4c;} .cp{width:100%;height:auto;overflow:hidden;} .cp_t{width:100%;height:auto;overflow:hidden;background:#d7e3eb;padding:70px 15vw;} .cpcpcp{width:1000px;height:auto;overflow:hidden;margin: 0 auto; text-align: center;display:flex;flex-direction: row;justify-content: flex-start;} .cpt_l{float:left;width:58%;margin: 0 auto; text-align: center;} .cpt_r{float:right;width:42%;text-align:left;align-self:center;} .cpt_r h2{font-size:24px;line-height:36px;color:#3265b0;margin-bottom: 20px;} .cpt_r p{font-size:16px;line-height:30px;color:#333333;} .cp_b{width:100%;height:auto;overflow:hidden;padding:70px 15vw;} .cpb_l{float:left;width:42%;text-align:left;align-self:center;padding-left:100px;} .cpb_l h2{font-size:24px;line-height:36px;color:#3265b0;margin-bottom: 20px;} .cpb_l p{font-size:16px;line-height:30px;color:#333333;} .cpb_r{float:right;width:58%;margin: 0 auto; text-align: center;} @media(max-width:1440px){ } @media(max-width:1280px){ .cpcp h2{font-size:24;line-height:40px;margin-bottom:20px;} .cpcp p{font-size:16px;line-height:30px;} } @media(max-width:1024px){ .cpcp h2{font-size:20px;line-height:24px;margin-bottom:10px;} .cpcp p{font-size:14px;line-height:24px;} .cp_t,.cp_b{padding:30px 30px;} .cpb_l{padding-left:0px;} .cpcpcp{width:100%;} .cpb_l h2 ,.cpt_r h2 {font-size: 18px;line-height: 24px;margin-bottom:10px;margin:10px;} .cpb_l p ,.cpt_r p{font-size: 14px;line-height: 24px;} } @media(max-width:768px){ .cp_t,.cp_b{padding:15px;} .cpcp h2{font-size:16px;line-height:24px;margin-bottom:5px;} .cpcp p{font-size:14px;line-height:24px;text-align:left;} .cpb_l h2 ,.cpt_r h2 {font-size: 16px;margin-bottom:5px;} } @media(max-width:414px){ .cpt_l,.cpb_r{float:none;width:100%;margin-bottom:10px;} .cpt_r,.cpb_l{float:none;width:100%;margin-bottom:10px;} .cpcpcp{width:100%;display:inherit;flex-direction: row;justify-content: flex-start;} } /*******技术平台 end********/ /*******公司简介 begin********/ .gsjs{width:100%;height:auto;overflow:hidden;margin:5.2vw 0px;background:url(../tu/tu17.jpg) no-repeat center center;background-size:cover;display:flex;flex-direction: row;justify-content: flex-start;} .gsjs_l{float:left;width:50%;height:auto;overflow:hidden;font-size:0;} .gsjs_l img{width:100%;vertical-align:middle;transition: all 0.6s ease;} .gsjs_l:hover img{transform: scale(1.05);-ms-transform:scale(1.05); -moz-transform:scale(1.05); -webkit-transform:scale(1.05); -o-transform:scale(1.05);} .gsjs_r{float:right;width:50%;height:auto;overflow:hidden;padding:0px 5.25vw 0px 4vw ;align-self:center;} .gsjs_r h2{font-size:1.6vw;line-height:1.6vw;color:#3265b0;margin-bottom:2vw;} .gsjs_r p{font-size:0.83vw;line-height:30px;color:#333333;text-align:justify;} @media(max-width:1440px){ .gsjs_r{padding:0px 6.25vw 0px 5.2vw ;} .gsjs_r{float:right;width:50%;height:auto;overflow:hidden;padding:0px 4.5vw 0px 30px ;align-self:center;} .gsjs_r h2{font-size:24px;line-height:24px;color:#3265b0;margin-bottom:10px;} .gsjs_r p{font-size:15px;line-height:25px;} } @media(max-width:1024px){ .gsjs_r h2{font-size:20px;line-height:20px;margin-bottom:30px;} .gsjs_r p{font-size:16px;line-height:26px;} } @media(max-width:768px){ .gsjs{width:100%;display:inherit;flex-direction: row;justify-content: flex-start;margin:30px 0px;} .gsjs_l{float:none;width:100%;} .gsjs_r{float:none;width:100%;padding:15px;} .gsjs_r h2{font-size:18px;margin-bottom:10px;} .gsjs_r p{font-size:14px;line-height:24px;} } /*******公司简介 end*********/ /********公司厂房 begin***/ .gscf{width:100%;height:auto;overflow:hidden;} .gscf h2{font-size:1.6vw;line-height:2.5vw;color:#222222;text-align:center;} .cfcf{width:100%;height:auto;overflow:hidden;margin:3.675vw 0px 3vw;} .cfcf li{float:left;width:50%;padding:1.6vw 0px 1.6vw 100px;border-left:1px solid #ccc;} .cfcf li.bg{padding-left:12vw;border-left:0px;} .cfcf li h3{} .cfcf li span{font-size:2.08vw;line-height:2.5vw;color:#3265b0;margin-right:10px;} .cfcf li font{font-size:1.25vw;line-height:2.5vw;color:#3265b0;} .cfcf li p{font-size:16px;line-height:24px;color:#444444;font-weight:bold;} .gs_cf{width:100%;height:auto;overflow:hidden;} .gs_cf img{vertical-align:middle;width:100%;transition: all 0.6s ease;} .gs_cf:hover img{transform: scale(1.05);-ms-transform:scale(1.05); -moz-transform:scale(1.05); -webkit-transform:scale(1.05); -o-transform:scale(1.05); } @media(max-width:1280px){ .gscf h2{font-size:24;line-height:40px;} } @media(max-width:1024px){ .gscf h2{font-size:20px;line-height:30px;} .cfcf{margin:30px 0px;} .cfcf li{padding:15px 0px 15px 60px;} .cfcf li.bg{padding-left:100px;} .cfcf li span{font-size:14px;line-height:24px;margin-right:5px;} .cfcf li font{font-size:14px;line-height:24px;} .cfcf li p{font-size:14px;line-height:24px;} } @media(max-width:768px){ .gscf h2{font-size:16px;line-height:24px;} } @media(max-width:414px){ .cfcf li{float:none;width:100%;padding:0px;border:0px;margin-bottom:5px;} .cfcf li.bg{padding-left:0px;} .cfcf{margin:15px 0px 5px;} } /********公司厂房 end*****/ /********发展历程 begin********/ .fz_lc{width:100%;height:auto;overflow:hidden;} .fzlc{width:100%;height:auto;overflow:hidden;padding:5.2vw 12.5vw;margin:0 auto;text-align:center;background:url(../images/tu11.png) no-repeat center top;} .fzlc_t{width:100%;height:auto;overflow:hidden;margin-bottom:10px;} .das{ clear:both; height:auto; overflow:hidden; margin:0 auto; width:100%; background:url(../images/tu16.png) repeat-y center top; padding-top:40px;} .das_l{ float:left; width:57%;margin-bottom:50px;} .das_lt{color:#3265b0;font-size:2.08vw; line-height:3vw; text-align:right;background:url(../images/tu13.png) no-repeat 89% 50%;font-family: "ALTER32_0";margin-bottom:15px;} .das_lb{height:auto; overflow:hidden; float:right;width: 100%;padding-right: 12%;} .das_lb p{ text-align:right; color:#333; line-height:26px; font-size:18px;background:url(../images/tu15.png) no-repeat right 10px; padding-right: 22%;margin-bottom:20px;} .das_r{ float:right; width:57%;margin-bottom:50px;} .das_rt{color:#3265b0; font-size:2.08vw; line-height:3vw; text-align:left;background:url(../images/tu13.png) no-repeat 11% 50%;font-family: "ALTER32_0";margin-bottom:15px;} .das_rb{height:auto; overflow:hidden; float:left;width: 100%;padding-left: 12%;} .das_rb p{ text-align:left; color:#333; line-height:26px; font-size:18px;background:url(../images/tu14.png) no-repeat left 10px; padding-left: 22%;margin-bottom:20px;} @media(max-width:1440px){ .fzlc{padding:5.2vw 6.25vw;} .das_lb p,.das_rb p{line-height:26px; font-size:16px;margin-bottom:15px;} .das_r,.das_l{margin-bottom:40px;} .das_rb p{padding-left: 25%;} .das_lb p{padding-right: 25%;} } @media(max-width:1024px){ .fzlc{padding:30px;} .fzlc_t{display:none;} .das{padding-top:0px;background:none;} .das_l{float:none; width:100%; margin-bottom:10px;} .das_lt{text-align:left;font-size:24px;line-height:24px;margin-bottom:10px;background:none;} .das_lb{background:none;padding:0px; float:none;width:100%;} .das_lb p{text-align:left;line-height:24px;font-size:16px;background:none;padding-right:0px;margin-bottom:10px;} .das_r{float:none; width:100%; margin-bottom:10px;} .das_rt{text-align:left;font-size:24px;line-height:24px;margin-bottom:10px;background:none;} .das_rb{background:none;padding:0px; float:none;width:100%;} .das_rb p{text-align:left;line-height:24px;font-size:16px;background:none;padding-left:0px;margin-bottom:10px;} } @media(max-width:768px){ .fzlc{padding:30px 15px;background-size:100%;} .das_rt,.das_lt{font-size:24px;margin-bottom:5px;} .das_lb p,.das_rb p{font-size:14px;margin-bottom:0px;} } /********发展历程 end********/ /********企业文化 begin********/ .qy_wh{width:100%;height:auto;overflow:hidden;background:url(../tu/tu19.jpg)no-repeat center center;background-size: cover;} .qywh{width:100%;height:auto;overflow:hidden;padding:5.2vw 12.5vw;margin:0 auto;text-align:center;} .qywh h2{display:inline-block;font-size:30px;line-height:30px;color:#3265b0;padding-bottom:30px;margin-bottom:45px;position:relative;} .qywh h2:after{content:'';position:absolute;bottom:0px;left:0px;right:0px;width:100%;height:1px;background:#ededed;} .qywh p{font-size:20px;line-height:38px;color:#333333;} .smyj{width:100%;height:auto;overflow:hidden;margin-top:120px;padding:10px 10vw 0px;} .smyj li{float:left;width:50%;height:auto;overflow:hidden;margin:0 auto;text-align:center;transition:all 0.5s ease;} .smyj li h3{font-size:30px;line-height:30px;color:#fff;margin-top:40px;margin-bottom:30px;} .smyj li h4{font-size:20px;line-height:30px;color:#fff;} .smyj li:hover{transform:translate(0,-10px); -webkit-transform:translate(0,-10px); -moz-transform:translate(0,-10px); -o-transform:translate(0,-10px); -ms-transform:translate(0,-10px);} @media(max-width:1440px){ .qywh{padding:5.2vw 6.25vw;} .qywh h2{font-size:22px;line-height:22px;padding-bottom:20px;margin-bottom:35px;} .smyj li h3{font-size:22px;line-height:26px;margin-top:20px;margin-bottom:15px;} .smyj li h4{font-size:16px;line-height:26px;} .smyj{margin-top:100px;padding:0px 10vw;} } @media(max-width:1024px){ .qywh{padding:30px;} .qywh h2{font-size:20px;line-height:20px;padding-bottom:10px;margin-bottom:15px;} .qywh p{font-size:14px;line-height:24px;} .smyj{margin-top:60px;padding:0px 0px;} } @media(max-width:768px){ .qywh{padding:30px 15px;} .qywh h2{font-size:18px;line-height:24px;} .smyj li h3{font-size:18px;line-height:24px;margin-top:10px;margin-bottom:10px;} .smyj li h4{font-size:14px;line-height:24px;} } /********企业文化 end********/ /********企业荣誉 begin********/ .qy_ry{width:100%;height:auto;overflow:hidden;padding:5.2vw 12.5vw;background:url(../tu/tu29.jpg)no-repeat center cneter;} .qyry{width:100%;height:auto;overflow:hidden;} .qyry dl{float:left;width:25%;height:auto;overflow:hidden;margin-bottom:4.698vw;} .qyry dt{width:100%;height:auto;overflow:hidden;border:1px solid #cccccc;} .qyry dt img{width:100%;vertical-align:middle;transition: all 0.6s ease;} .qyry dd{width:100%;margin:0 auto;text-align:center;margin-top:1.6vw;} .qyry dd h2{font-size:18px;line-height:28px;color:#333;} .qyry dd p{font-size:20px;line-height:28px;color:#333;} .qyry dl:hover dd p{color:#3265b0;} .qyry dl:hover dd h2{color:#3265b0;} .qyry dl:hover dt img{transform: scale(1.05);-ms-transform:scale(1.05); -moz-transform:scale(1.05); -webkit-transform:scale(1.05); -o-transform:scale(1.05);} @media(max-width:1440px){ .qy_ry{padding:5.2vw 6.25vw;} .qyry dl{margin-bottom:3vw;} } @media(max-width:1024px){ .qy_ry{padding:30px;} .qyry dl{margin-bottom:20px;} .qyry dd{margin-top:10px;} .qyry dd h2{font-size:16px;line-height:24px;font-family:inherit;} .qyry dd p{font-size:16px;line-height:24px;} } @media(max-width:768px){ .qyry dl{float:left;width:50%;} .qy_ry{padding:30px 15px;} } @media(max-width:414px){ .qyry dl{float:none;width:100%;} } /********企业荣誉 end********/ /********产品线 begin**********/ .cpx{width:100%;height:auto;overflow:hidden;} .cpx1{margin-top:5.2vw;} .cpx h2{font-size:24px;line-height:30px;color:#333;} .cpx_x{width:100%;height:auto;overflow:hidden;margin-top:35px;} .cpx_x table{width:100%;margin:0 auto;table-layout: fixed;border-collapse:collapse; } .cpx_x table tr{width:100%;height:60px;overflow:hidden;background:#fff;font-size:0;border-bottom:1px solid #666666;} .cpx_x table tr td{width:14.28%;font-size:16px;line-height:24px;color:#333333;text-align:center;padding:10px 10px;background:#fff;} .cpx_x table tr td font{display:inline-block;} .cpx_x table tr td:nth-child(2){position:relative;z-index:9999;} .cpx_x table tr td:nth-child(3){} .cpx_x table tr td:nth-child(4){background:#f5f5f5;padding:0px;} .cpx_x table tr td:nth-child(5){padding:0px;} .cpx_x table tr td:nth-child(6){background:#f5f5f5;padding:0px;} .cpx_x table tr td:nth-child(7){padding:0px;} .cpx_x table tr td:nth-child(8){background:#f5f5f5;padding:0px;} .cpx_x table tr td h1{width:100%;height:24px;background:url(../images/tu19.png)no-repeat;background-position:100% 0px;background-size:cover;} .cpx_x table tr td h2{width:100%;height:24px;background:url(../images/tu20.png)no-repeat;background-position:100% 0px;background-size:cover;} .cpx_x table tr td h3{width:100%;height:24px;background:url(../images/tu21.png)no-repeat;background-position:100% 0px;background-size:cover;} .cpx_x table tr td h4{width:100%;height:24px;background:url(../images/tu22.png)no-repeat;background-position:100% 0px;background-size:cover;} .cpx_x table tr td h5{width:100%;height:24px;background:url(../images/tu23.png)no-repeat;background-position:100% 0px;background-size:cover;} .cpx_x table tr.bg td{font-size:18px;line-height:24px;color:#fff;text-align:center;background:#3265b0;border-bottom:0px;} @media(max-width:1440px){ .cpx_x table tr td{font-size:14px;line-height:24px;padding:0px 2px;} .cpx_x table tr.bg td{font-size:16px;line-height:24px;} } @media(max-width:1360px){ .cpx_x{margin-top:30px;} } @media(max-width:1024px){ .cpx_x table tr td{text-align:center;} .cpx_x{padding:0px;} .cpx_x table{width:100%;} .cpx_x table tr{width:100%;height:40px;} .cpx_x table tr td{font-size:14px;line-height:24px;padding:0px 10px;} .cpx_x table tr.bg td{font-size:14px;line-height:24px;} .cpx1{margin-top:30px;} .cpx h2{font-size:20px;line-height:24px;} .cpx_x{margin-top:15px;} } @media(max-width:768px){ .cpx h2{font-size:18px;line-height:24px;} .cpx_x{margin-top:15px;padding:0px 0px;} .cpx_x{width:100%;overflow-x:scroll} .cpx_x table{width:1250px;} } @media(max-width:414px){ .cpx h2{font-size:16px;line-height:24px;} .cpx_x table tr td{font-size:14px;line-height:24px;padding:0px 5px;} .cpx_x table tr.bg td{font-size:14px;line-height:24px;} } .syjr_a h2,.syjr_a p,.syjr_a .more{ opacity:0;} .view-current .syjr_a h2{animation: driveL 1s linear; opacity:1;} .view-current .syjr_a p{animation: driveL 1s linear; opacity:1;} .view-current .syjr_a .more{animation: driveL 1s linear; opacity:1;} .syjr_c p{ opacity:0;} .view-current .syjr_c p{animation: driveL 1s linear; opacity:1;} .syjr_b h2,.syjr_b p{ opacity:0;} .view-current .syjr_b h2{animation: driveR 1s linear; opacity:1;} .view-current .syjr_b p{animation: driveR 1s linear; opacity:1;} .syjr_d h4,.syjr_d p{ opacity:0;} .view-current .syjr_d h4{animation: driveR 1s linear; opacity:1;} .view-current .syjr_d p{animation: driveR 1s linear; opacity:1;} .sy_n h2{ opacity:0;} .view-current .sy_n h2{animation: driveT 1s linear; opacity:1;} /********产品线 end**********/ .wrapper { z-index:5; -webkit-transition:-webkit-transform .5s; transition:transform .5s; overflow:hidden; } .wrapper.mm-menu-open { -webkit-transform:translateX(300px); -ms-transform:translateX(300px); transform:translateX(300px) } .mm-menu-toggle { position:absolute; top:12px; right:12px; z-index:20; width:24px; height:18px; font-size:0; text-indent:-9999px; display:none; z-index:999999 } @media(max-width:1024px){ .mm-menu-toggle { position:absolute; top:37%; right:30px; z-index:20; width:24px; height:18px; background:-webkit-linear-gradient(90deg, rgba(21, 76, 147, 0), rgba(21, 76, 147, 0) 7px, #3265b0 7px, #3265b0 11px, rgba(21, 76, 147, 0) 11px, rgba(21, 76, 147,0) 18px); background:linear-gradient(0deg, rgba(21, 76, 147, 0), rgba(21, 76, 147, 0) 7px, #3265b0 7px, #3265b0 11px, rgba(21, 76, 147, 0) 11px, rgba(21, 76, 147, 0) 18px); font-size:0; text-indent:-9999px; display:block; } } @media(max-width:768px){ .mm-menu-toggle {right:15px;} } .mm-menu-toggle::after, .mm-menu-toggle::before { display:block; position:absolute; left:0; width:100%; height:4px; background-color:#3265b0; content:""; z-index:9999999 } .mm-menu-toggle::before { top:0; -webkit-transform-origin:bottom left; -ms-transform-origin:bottom left; transform-origin:bottom left } .mm-menu-toggle::after { bottom:0; -webkit-transform-origin:top left; -ms-transform-origin:top left; transform-origin:top left } .mm-menu-toggle, .mm-menu-toggle::after, .mm-menu-toggle::before { -webkit-transition:all .5s; transition:all .5s } .mm-menu-toggle.active { -webkit-transform:rotate(360deg); -ms-transform:rotate(360deg); transform:rotate(360deg) } .mm-menu-toggle.active::before { width:75%; -webkit-transform:translateY(7px) rotate(-45deg); -ms-transform:translateY(7px) rotate(-45deg); transform:translateY(7px) rotate(-45deg) } .mm-menu-toggle.active::after { width:75%; -webkit-transform:translateY(-7px) rotate(45deg); -ms-transform:translateY(-7px) rotate(45deg); transform:translateY(-7px) rotate(45deg) } .mm-menu { position:fixed; top:85px; right:0; z-index:10; background-color:#fff; width:100%; height:100%; overflow-y:auto; box-shadow:0; -webkit-transform:translateX(100%); -ms-transform:translateX(100%); transform:translateX(100%); -webkit-transition:-webkit-transform .3s, box-shadow .3s; transition:transform .3s, box-shadow .3s; } .mm-menu.active { box-shadow:0 2px 8px rgba(0, 0, 0, .2); -webkit-transform:translateX(0); -ms-transform:translateX(0); transform:translateX(0) } @media all and (min-width:300px) { .mm-menu { width:200px; -webkit-transform:translateX(200px); -ms-transform:translateX(200px); transform:translateX(200px); top:70px; z-index:9999 } } @media all and (max-width:768px) { .mm-menu { width:200px; -webkit-transform:translateX(200px); -ms-transform:translateX(200px); transform:translateX(200px); top:70px; z-index:9999 } } @media all and (max-width:414px) { .mm-menu { width:200px; -webkit-transform:translateX(200px); -ms-transform:translateX(200px); transform:translateX(200px); top:70px; z-index:9999 } } .mm-menu__header { position:relative; width:100%; height:188px; background-color:#CDDC39 } .mm-menu__title { position:absolute; bottom:12px; left:12px; margin:0; padding:0; color:#fff; font-size:22px } .mm-menu__items { list-style:none; margin:0; padding:0 } .mm-menu__item { display:block; width:100%; opacity:0; -webkit-transform:translateX(-50%); -ms-transform:translateX(-50%); transform:translateX(-50%) } .mm-menu__item.in-view { opacity:1; -webkit-transform:translateX(0); -ms-transform:translateX(0); transform:translateX(0) } .mm-menu__item.item-1 { -webkit-transition:opacity .5s .1s, -webkit-transform .5s .1s; transition:opacity .5s .1s, transform .5s .1s } .mm-menu__item.item-2 { -webkit-transition:opacity .5s .2s, -webkit-transform .5s .2s; transition:opacity .5s .2s, transform .5s .2s } .mm-menu__item.item-3 { -webkit-transition:opacity .5s .3s, -webkit-transform .5s .3s; transition:opacity .5s .3s, transform .5s .3s } .mm-menu__item.item-4 { -webkit-transition:opacity .5s .4s, -webkit-transform .5s .4s; transition:opacity .5s .4s, transform .5s .4s } .mm-menu__item.item-5 { -webkit-transition:opacity .5s .5s, -webkit-transform .5s .5s; transition:opacity .5s .5s, transform .5s .5s } .mm-menu__item.item-6 { -webkit-transition:opacity .5s .6s, -webkit-transform .5s .6s; transition:opacity .5s .6s, transform .5s .6s } .mm-menu__item.item-7 { -webkit-transition:opacity .5s .7s, -webkit-transform .5s .7s; transition:opacity .5s .7s, transform .5s .7s } .mm-menu__item.item-8 { -webkit-transition:opacity .5s .8s, -webkit-transform .5s .8s; transition:opacity .5s .8s, transform .5s .8s } .mm-menu__item.item-9 { -webkit-transition:opacity .5s .9s, -webkit-transform .5s .9s; transition:opacity .5s .9s, transform .5s .9s } .mm-menu__item.item-10 { -webkit-transition:opacity .5s 1s, -webkit-transform .5s 1s; transition:opacity .5s 1s, transform .5s 1s } .mm-menu__item.item-11 { -webkit-transition:opacity .5s 1.1s, -webkit-transform .5s 1.1s; transition:opacity .5s 1.1s, transform .5s 1.1s } .mm-menu__item.item-12 { -webkit-transition:opacity .5s 1.2s, -webkit-transform .5s 1.2s; transition:opacity .5s 1.2s, transform .5s 1.2s } .mm-menu__item.item-13 { -webkit-transition:opacity .5s 1.3s, -webkit-transform .5s 1.3s; transition:opacity .5s 1.3s, transform .5s 1.3s } .mm-menu__item.item-14 { -webkit-transition:opacity .5s 1.4s, -webkit-transform .5s 1.4s; transition:opacity .5s 1.4s, transform .5s 1.4s } .mm-menu__item.item-15 { -webkit-transition:opacity .5s 1.5s, -webkit-transform .5s 1.5s; transition:opacity .5s 1.5s, transform .5s 1.5s } .mm-menu__item.item-16 { -webkit-transition:opacity .5s 1.6s, -webkit-transform .5s 1.6s; transition:opacity .5s 1.6s, transform .5s 1.6s } .mm-menu__item.item-17 { -webkit-transition:opacity .5s 1.7s, -webkit-transform .5s 1.7s; transition:opacity .5s 1.7s, transform .5s 1.7s } .mm-menu__item.item-18 { -webkit-transition:opacity .5s 1.8s, -webkit-transform .5s 1.8s; transition:opacity .5s 1.8s, transform .5s 1.8s } .mm-menu__item.item-19 { -webkit-transition:opacity .5s 1.9s, -webkit-transform .5s 1.9s; transition:opacity .5s 1.9s, transform .5s 1.9s } .mm-menu__item.item-20 { -webkit-transition:opacity .5s 2s, -webkit-transform .5s 2s; transition:opacity .5s 2s, transform .5s 2s } .mm-menu__link { display:block; position:relative; overflow:hidden; margin:4px 0; padding:12px; color:#727272; font-size:16px; text-decoration:none; -webkit-transition:background .5s, color .5s; transition:background .5s, color .5s } .mm-menu__link-text { position:relative; z-index:2; color:#252525; } .mm-menu__link--touch-effect { display:block; position:absolute; z-index:1; width:0; height:0; border-radius:100%; -webkit-transform:scale(0); -ms-transform:scale(0); transform:scale(0); -webkit-transform-origin:50% 50%; -ms-transform-origin:50% 50%; transform-origin:50% 50% } .mm-menu__link--touch-effect.animating { -webkit-transform:scale(1); -ms-transform:scale(1); transform:scale(1); -webkit-transition:-webkit-transform .5s; transition:transform .5s } .mm-menu-mask { display:block; position:fixed; top:0; left:0; z-index:999; width:100%; height:100%; visibility:hidden; opacity:0; -webkit-transition:opacity .5s, visibility .5s; transition:opacity .5s, visibility .5s } .mm-menu-mask.active { visibility:visible; opacity:1 }/*! * Material Design Iconic Font 1.0.1 by Sergey Kupletsky (@zavoloklom) - http://zavoloklom.github.io/material-design-iconic-font/ * License - https://github.com/zavoloklom/material-design-iconic-font/blob/gh-pages/License.md (Attribution-ShareAlike 4.0 International license) */ #menu-wrapper #hamburger-menu { position: relative; width: 25px; height: 20px; margin-top:20px; margin-right:20px; float:right; } @media(max-width:414px){ #menu-wrapper #hamburger-menu { position: relative; width: 25px; height: 20px; margin-top:20px; margin-right:15px; float:right; } } #menu-wrapper #hamburger-menu span { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; left: 0; display: block; width: 100%; height: 2px; border-radius: 10px; color: black; background-color: white; position: absolute; -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .4s ease-in-out; transition: .4s ease-in-out; } #menu-wrapper #hamburger-menu span:nth-child(1) { top: 0; } #menu-wrapper #hamburger-menu span:nth-child(2) { top: 9px; } #menu-wrapper #hamburger-menu span:nth-child(3) { top: 18px; } #menu-wrapper #hamburger-menu.open span:nth-child(1) { top: 9px; -webkit-transform: rotate(135deg); transform: rotate(135deg); } #menu-wrapper #hamburger-menu.open span:nth-child(2) { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; left: 60px; } #menu-wrapper #hamburger-menu.open span:nth-child(3) { top: 9px; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); } #menu-container .menu-list .menu-submenu { padding-top: 0px; padding-bottom: 0px; } #menu-container .menu-list { padding-left: 0; display: block; position: fixed; width: 100%; background: white; box-shadow: rgba(100,100,100,0.2) 6px 2px 10px; z-index: 999999999; overflow-y: auto; overflow-x: hidden; right: -100%; top:60px; } #menu-container .menu-list li.accordion-toggle, #menu-container .menu-list .menu-login { font-size: 16px; padding: 15px; text-transform: uppercase; border-top: 1px solid #dbdcd2; } .menu-list li { font-size: 16px; padding:10px 15px; text-transform: uppercase; border-top: 1px solid #dbdcd2; } .menu-list ul.open a{padding-left:20px;} .menu-list { height:480px; overflow:hidden; overflow-y:scroll;} .menu-list::-webkit-scrollbar-track{background-color: #e0e0e0;} .menu-list::-webkit-scrollbar{width: 0px;background-color:#e0e0e0;} .menu-list::-webkit-scrollbar-thumb{background-color: #fc5239;border: 2px solid #fc5239;} .menu-list li a{ color:#000000; font-size:16px;} .menu-list li a.head{ font-size:14px; letter-spacing:-1px;} .menu-list li:first-of-type { border-top: 0; } .accordion-toggle, .accordion-content { cursor: pointer; font-size: 16px; position: relative; letter-spacing: 1px; } .accordion-content { display: none; } .accordion-toggle a:before, .accordion-toggle a:after { content: ''; display: block; position: absolute; top: 50%; right: 30px; width: 15px; height: 2px; margin-top: -1px; background-color: #5a5858; -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transition: all 0.3s; transition: all 0.3s ease-out; } .accordion-toggle a:before { -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 1; z-index: 2; } .accordion-toggle.active-tab { border-bottom:1px solid #dbdcd2; transition: all 0.3s ease; } .accordion-toggle.active-tab a:before { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); background: #333 !important; } .accordion-toggle.active-tab a:after { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); background: #fff !important; opacity: 0; }