.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 1 2s ease-in; -o-animation: journal 1 2s ease-in; -moz-animation: journal 1 2s ease-in; -ms-animation: journal 1 2s ease-in; animation: journal 1 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 1s ease-out; -o-animation: flipBottom 1 1s ease-out; -moz-animation: flipBottom 1 1s ease-out; -ms-animation: flipBottom 1 1s ease-out; animation: flipBottom 1 1s ease-out; 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; } }