.flani-slideDown{ transform: translateY(-100%); animation-name: flani-slideDown; -webkit-animation-name: flani-slideDown; animation-duration: 1s; -webkit-animation-duration: 1s; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; animation-timing-function: ease; -webkit-animation-timing-function: ease; visibility: visible !important; } @keyframes flani-slideDown { 0% { transform: translateY(-100%); } 50%{ transform: translateY(8%); } 65%{ transform: translateY(-4%); } 80%{ transform: translateY(4%); } 95%{ transform: translateY(-2%); } 100% { transform: translateY(0%); } } @-webkit-keyframes flani-slideDown { 0% { -webkit-transform: translateY(-100%); } 50%{ -webkit-transform: translateY(8%); } 65%{ -webkit-transform: translateY(-4%); } 80%{ -webkit-transform: translateY(4%); } 95%{ -webkit-transform: translateY(-2%); } 100% { -webkit-transform: translateY(0%); } } /* ============================================== flani-slideUp ============================================== */ .flani-slideUp{ transform: translateY(100%); animation-name: flani-slideUp; -webkit-animation-name: flani-slideUp; animation-duration: 1s; -webkit-animation-duration: 1s; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; animation-timing-function: ease; -webkit-animation-timing-function: ease; visibility: visible !important; } @keyframes flani-slideUp { 0% { transform: translateY(100%); } 50%{ transform: translateY(-8%); } 65%{ transform: translateY(4%); } 80%{ transform: translateY(-4%); } 95%{ transform: translateY(2%); } 100% { transform: translateY(0%); } } @-webkit-keyframes flani-slideUp { 0% { -webkit-transform: translateY(100%); } 50%{ -webkit-transform: translateY(-8%); } 65%{ -webkit-transform: translateY(4%); } 80%{ -webkit-transform: translateY(-4%); } 95%{ -webkit-transform: translateY(2%); } 100% { -webkit-transform: translateY(0%); } } /* ============================================== flani-slideLeft ============================================== */ .flani-slideLeft{ transform: translateX(150%); animation-name: flani-slideLeft; -webkit-animation-name: flani-slideLeft; animation-duration: 1s; -webkit-animation-duration: 1s; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; visibility: visible !important; } @keyframes flani-slideLeft { 0% { transform: translateX(150%); } 50%{ transform: translateX(-8%); } 65%{ transform: translateX(4%); } 80%{ transform: translateX(-4%); } 95%{ transform: translateX(2%); } 100% { transform: translateX(0%); } } @-webkit-keyframes flani-slideLeft { 0% { -webkit-transform: translateX(150%); } 50%{ -webkit-transform: translateX(-8%); } 65%{ -webkit-transform: translateX(4%); } 80%{ -webkit-transform: translateX(-4%); } 95%{ -webkit-transform: translateX(2%); } 100% { -webkit-transform: translateX(0%); } } /* ============================================== flani-slideRight ============================================== */ .flani-slideRight{ transform: translateX(-150%); animation-name: flani-slideRight; -webkit-animation-name: flani-slideRight; animation-duration: 1s; -webkit-animation-duration: 1s; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; visibility: visible !important; } @keyframes flani-slideRight { 0% { transform: translateX(-150%); } 50%{ transform: translateX(8%); } 65%{ transform: translateX(-4%); } 80%{ transform: translateX(4%); } 95%{ transform: translateX(-2%); } 100% { transform: translateX(0%); } } @-webkit-keyframes flani-slideRight { 0% { -webkit-transform: translateX(-150%); } 50%{ -webkit-transform: translateX(8%); } 65%{ -webkit-transform: translateX(-4%); } 80%{ -webkit-transform: translateX(4%); } 95%{ -webkit-transform: translateX(-2%); } 100% { -webkit-transform: translateX(0%); } } /* ============================================== flani-slideExpandUp ============================================== */ .flani-slideExpandUp{ transform: translateY(100%) scaleX(0.5); animation-name: flani-slideExpandUp; -webkit-animation-name: flani-slideExpandUp; animation-duration: 1.6s; -webkit-animation-duration: 1.6s; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; animation-timing-function: ease-out; -webkit-animation-timing-function: ease -out; visibility: visible !important; } @keyframes flani-slideExpandUp { 0% { transform: translateY(100%) scaleX(0.5); } 30%{ transform: translateY(-8%) scaleX(0.5); } 40%{ transform: translateY(2%) scaleX(0.5); } 50%{ transform: translateY(0%) scaleX(1.1); } 60%{ transform: translateY(0%) scaleX(0.9); } 70% { transform: translateY(0%) scaleX(1.05); } 80%{ transform: translateY(0%) scaleX(0.95); } 90% { transform: translateY(0%) scaleX(1.02); } 100%{ transform: translateY(0%) scaleX(1); } } @-webkit-keyframes flani-slideExpandUp { 0% { -webkit-transform: translateY(100%) scaleX(0.5); } 30%{ -webkit-transform: translateY(-8%) scaleX(0.5); } 40%{ -webkit-transform: translateY(2%) scaleX(0.5); } 50%{ -webkit-transform: translateY(0%) scaleX(1.1); } 60%{ -webkit-transform: translateY(0%) scaleX(0.9); } 70% { -webkit-transform: translateY(0%) scaleX(1.05); } 80%{ -webkit-transform: translateY(0%) scaleX(0.95); } 90% { -webkit-transform: translateY(0%) scaleX(1.02); } 100%{ -webkit-transform: translateY(0%) scaleX(1); } } /* ============================================== flani-expandUp ============================================== */ .flani-expandUp{ transform: translateY(100%) scale(0.6) scaleY(0.5); animation-name: flani-expandUp; -webkit-animation-name: flani-expandUp; animation-duration: 0.7s; -webkit-animation-duration: 0.7s; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; animation-timing-function: ease; -webkit-animation-timing-function: ease; visibility: visible !important; } @keyframes flani-expandUp { 0% { transform: translateY(100%) scale(0.6) scaleY(0.5); } 60%{ transform: translateY(-7%) scaleY(1.12); } 75%{ transform: translateY(3%); } 100% { transform: translateY(0%) scale(1) scaleY(1); } } @-webkit-keyframes flani-expandUp { 0% { -webkit-transform: translateY(100%) scale(0.6) scaleY(0.5); } 60%{ -webkit-transform: translateY(-7%) scaleY(1.12); } 75%{ -webkit-transform: translateY(3%); } 100% { -webkit-transform: translateY(0%) scale(1) scaleY(1); } } /* ============================================== flani-fadeIn ============================================== */ .flani-fadeIn{ opacity: 0; animation-name: flani-fadeIn; -webkit-animation-name: flani-fadeIn; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; visibility: visible !important; } @keyframes flani-fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes flani-fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } /* ============================================== flani-fadeIn ============================================== */ .flani-fadeInScale{ transform: scale(0); opacity: 0; animation-name: flani-fadeInScale; -webkit-animation-name: flani-fadeInScale; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; visibility: visible !important; } @keyframes flani-fadeInScale { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.1); } 80% { transform: scale(0.9); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } @-webkit-keyframes flani-fadeInScale { 0% { -webkit-transform: scale(0); opacity: 0; } 60% { -webkit-transform: scale(1.1); } 80% { -webkit-transform: scale(0.9); opacity: 1; } 100% { -webkit-transform: scale(1); opacity: 1; } } /* ============================================== flani-expandOpen ============================================== */ .flani-expandOpen{ transform: scale(1.8); animation-name: flani-expandOpen; -webkit-animation-name: flani-expandOpen; animation-duration: 1.2s; -webkit-animation-duration: 1.2s; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; visibility: visible !important; } @keyframes flani-expandOpen { 0% { transform: scale(1.8); } 50% { transform: scale(0.95); } 80% { transform: scale(1.05); } 90% { transform: scale(0.98); } 100% { transform: scale(1); } } @-webkit-keyframes flani-expandOpen { 0% { -webkit-transform: scale(1.8); } 50% { -webkit-transform: scale(0.95); } 80% { -webkit-transform: scale(1.05); } 90% { -webkit-transform: scale(0.98); } 100% { -webkit-transform: scale(1); } } /* ============================================== flani-bigEntrance ============================================== */ .flani-bigEntrance{ transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%); opacity: 0.2; animation-name: flani-bigEntrance; -webkit-animation-name: flani-bigEntrance; animation-duration: 1.6s; -webkit-animation-duration: 1.6s; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; visibility: visible !important; } @keyframes flani-bigEntrance { 0% { transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%); opacity: 0.2; } 30% { transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%); opacity: 1; } 45% { transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%); opacity: 1; } 60% { transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%); opacity: 1; } 75% { transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%); opacity: 1; } 90% { transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%); opacity: 1; } 100% { transform: scale(1) rotate(0deg) translateX(0%) translateY(0%); opacity: 1; } } @-webkit-keyframes flani-bigEntrance { 0% { -webkit-transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%); opacity: 0.2; } 30% { -webkit-transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%); opacity: 1; } 45% { -webkit-transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%); opacity: 1; } 60% { -webkit-transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%); opacity: 1; } 75% { -webkit-transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%); opacity: 1; } 90% { -webkit-transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%); opacity: 1; } 100% { -webkit-transform: scale(1) rotate(0deg) translateX(0%) translateY(0%); opacity: 1; } } /* ============================================== flani-hatch ============================================== */ .flani-hatch{ transform: rotate(0deg) scaleY(0.6); animation-name: flani-hatch; -webkit-animation-name: flani-hatch; animation-duration: 2s; -webkit-animation-duration: 2s; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; visibility: visible !important; } @keyframes flani-hatch { 0% { transform: rotate(0deg) scaleY(0.6); } 20% { transform: rotate(-2deg) scaleY(1.05); } 35% { transform: rotate(2deg) scaleY(1); } 50% { transform: rotate(-2deg); } 65% { transform: rotate(1deg); } 80% { transform: rotate(-1deg); } 100% { transform: rotate(0deg); } } @-webkit-keyframes flani-hatch { 0% { -webkit-transform: rotate(0deg) scaleY(0.6); } 20% { -webkit-transform: rotate(-2deg) scaleY(1.05); } 35% { -webkit-transform: rotate(2deg) scaleY(1); } 50% { -webkit-transform: rotate(-2deg); } 65% { -webkit-transform: rotate(1deg); } 80% { -webkit-transform: rotate(-1deg); } 100% { -webkit-transform: rotate(0deg); } } /* ============================================== flani-bounce ============================================== */ .flani-bounce{ transform: translateY(0%) scaleY(0.6); animation-name: flani-bounce; -webkit-animation-name: flani-bounce; animation-duration: 1.6s; -webkit-animation-duration: 1.6s; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; animation-timing-function: ease; -webkit-animation-timing-function: ease; transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; visibility: visible !important; } @keyframes flani-bounce { 0% { transform: translateY(0%) scaleY(0.6); } 60%{ transform: translateY(-100%) scaleY(1.1); } 70%{ transform: translateY(0%) scaleY(0.95) scaleX(1.05); } 80%{ transform: translateY(0%) scaleY(1.05) scaleX(1); } 90%{ transform: translateY(0%) scaleY(0.95) scaleX(1); } 100%{ transform: translateY(0%) scaleY(1) scaleX(1); } } @-webkit-keyframes flani-bounce { 0% { -webkit-transform: translateY(0%) scaleY(0.6); } 60%{ -webkit-transform: translateY(-100%) scaleY(1.1); } 70%{ -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1.05); } 80%{ -webkit-transform: translateY(0%) scaleY(1.05) scaleX(1); } 90%{ -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1); } 100%{ -webkit-transform: translateY(0%) scaleY(1) scaleX(1); } } /* ============================================== flani-pulse ============================================== */ .flani-pulse{ transform: scale(0.9); opacity: 0.7; animation-name: flani-pulse; -webkit-animation-name: flani-pulse; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; visibility: visible !important; } @keyframes flani-pulse { 0% { transform: scale(0.9); opacity: 0.7; } 50% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.9); opacity: 0.7; } } @-webkit-keyframes flani-pulse { 0% { -webkit-transform: scale(0.95); opacity: 0.7; } 50% { -webkit-transform: scale(1); opacity: 1; } 100% { -webkit-transform: scale(0.95); opacity: 0.7; } } /* ============================================== flani-floating ============================================== */ .flani-floating{ transform: translateY(0%); animation-name: flani-floating; -webkit-animation-name: flani-floating; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; visibility: visible !important; } @keyframes flani-floating { 0% { transform: translateY(0%); } 50% { transform: translateY(8%); } 100% { transform: translateY(0%); } } @-webkit-keyframes flani-floating { 0% { -webkit-transform: translateY(0%); } 50% { -webkit-transform: translateY(8%); } 100% { -webkit-transform: translateY(0%); } } /* ============================================== flani-tossing ============================================== */ .flani-tossing{ transform: rotate(-4deg); animation-name: flani-tossing; -webkit-animation-name: flani-tossing; animation-duration: 2.5s; -webkit-animation-duration: 2.5s; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; visibility: visible !important; } @keyframes flani-tossing { 0% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } 100% { transform: rotate(-4deg); } } @-webkit-keyframes flani-tossing { 0% { -webkit-transform: rotate(-4deg); } 50% { -webkit-transform: rotate(4deg); } 100% { -webkit-transform: rotate(-4deg); } } /* ============================================== flani-pullUp ============================================== */ .flani-pullUp{ transform: scaleY(0.1); animation-name: flani-pullUp; -webkit-animation-name: flani-pullUp; animation-duration: 1.1s; -webkit-animation-duration: 1.1s; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; visibility: visible !important; } @keyframes flani-pullUp { 0% { transform: scaleY(0.1); } 40% { transform: scaleY(1.02); } 60% { transform: scaleY(0.98); } 80% { transform: scaleY(1.01); } 100% { transform: scaleY(0.98); } 80% { transform: scaleY(1.01); } 100% { transform: scaleY(1); } } @-webkit-keyframes flani-pullUp { 0% { -webkit-transform: scaleY(0.1); } 40% { -webkit-transform: scaleY(1.02); } 60% { -webkit-transform: scaleY(0.98); } 80% { -webkit-transform: scaleY(1.01); } 100% { -webkit-transform: scaleY(0.98); } 80% { -webkit-transform: scaleY(1.01); } 100% { -webkit-transform: scaleY(1); } } /* ============================================== flani-pullDown ============================================== */ .flani-pullDown{ transform: scaleY(0.1); animation-name: flani-pullDown; -webkit-animation-name: flani-pullDown; animation-duration: 1.1s; -webkit-animation-duration: 1.1s; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -webkit-transform-origin: 50% 0%; visibility: visible !important; } @keyframes flani-pullDown { 0% { transform: scaleY(0.1); } 40% { transform: scaleY(1.02); } 60% { transform: scaleY(0.98); } 80% { transform: scaleY(1.01); } 100% { transform: scaleY(0.98); } 80% { transform: scaleY(1.01); } 100% { transform: scaleY(1); } } @-webkit-keyframes flani-pullDown { 0% { -webkit-transform: scaleY(0.1); } 40% { -webkit-transform: scaleY(1.02); } 60% { -webkit-transform: scaleY(0.98); } 80% { -webkit-transform: scaleY(1.01); } 100% { -webkit-transform: scaleY(0.98); } 80% { -webkit-transform: scaleY(1.01); } 100% { -webkit-transform: scaleY(1); } } /* ============================================== flani-stretchLeft ============================================== */ .flani-stretchLeft{ transform: scaleX(0.3); animation-name: flani-stretchLeft; -webkit-animation-name: flani-stretchLeft; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; transform-origin: 100% 0%; -ms-transform-origin: 100% 0%; -webkit-transform-origin: 100% 0%; visibility: visible !important; } @keyframes flani-stretchLeft { 0% { transform: scaleX(0.3); } 40% { transform: scaleX(1.02); } 60% { transform: scaleX(0.98); } 80% { transform: scaleX(1.01); } 100% { transform: scaleX(0.98); } 80% { transform: scaleX(1.01); } 100% { transform: scaleX(1); } } @-webkit-keyframes flani-stretchLeft { 0% { -webkit-transform: scaleX(0.3); } 40% { -webkit-transform: scaleX(1.02); } 60% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(1); } } /* ============================================== flani-stretchRight ============================================== */ .flani-stretchRight{ transform: scaleX(0.3); animation-name: flani-stretchRight; -webkit-animation-name: flani-stretchRight; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -webkit-transform-origin: 0% 0%; visibility: visible !important; } @keyframes flani-stretchRight { 0% { transform: scaleX(0.3); } 40% { transform: scaleX(1.02); } 60% { transform: scaleX(0.98); } 80% { transform: scaleX(1.01); } 100% { transform: scaleX(0.98); } 80% { transform: scaleX(1.01); } 100% { transform: scaleX(1); } } @-webkit-keyframes flani-stretchRight { 0% { -webkit-transform: scaleX(0.3); } 40% { -webkit-transform: scaleX(1.02); } 60% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(1); } } /* ============================================== flani-slideLeftN ============================================== */ .flani-slideLeftN{ transform: translateX(150%); animation-name: flani-slideLeftN; -webkit-animation-name: flani-slideLeftN; animation-duration: .6s; -webkit-animation-duration: .6s; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -webkit-transform-origin: 0% 0%; visibility: visible !important; } @keyframes flani-slideLeftN { 0% { transform: translateX(150%); } 100% { transform: translateX(0%); } } @-webkit-keyframes flani-slideLeftN { 0% { transform: translateX(150%); } 100% { transform: translateX(0%); } } /* ============================================== flani-slideRightN ============================================== */ .flani-slideRightN{ transform: translateX(-150%); animation-name: flani-slideRightN; -webkit-animation-name: flani-slideRightN; animation-duration: .6s; -webkit-animation-duration: .6s; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -webkit-transform-origin: 0% 0%; visibility: visible !important; } @keyframes flani-slideRightN { 0% { transform: translateX(-150%); } 100% { transform: translateX(0%); } } @-webkit-keyframes flani-slideRightN { 0% { transform: translateX(-150%); } 100% { transform: translateX(0%); } } /* ============================================== flani-slideUpN ============================================== */ .flani-slideUpN{ transform: translateY(100%); animation-name: flani-slideUpN; -webkit-animation-name: flani-slideUpN; animation-duration: .6s; -webkit-animation-duration: .6s; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -webkit-transform-origin: 0% 0%; visibility: visible !important; } @keyframes flani-slideUpN { 0% { transform: translateY(100%); } 100% { transform: translateY(0%); } } @-webkit-keyframes flani-slideUpN { 0% { transform: translateY(100%); } 100% { transform: translateY(0%); } } /* ============================================== flani-slideDownN ============================================== */ .flani-slideDownN{ transform: translateY(-100%); animation-name: flani-slideDownN; -webkit-animation-name: flani-slideDownN; animation-duration: .6s; -webkit-animation-duration: .6s; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -webkit-transform-origin: 0% 0%; visibility: visible !important; } @keyframes flani-slideDownN { 0% { transform: translateY(-100%); } 100% { transform: translateY(0%); } } @-webkit-keyframes flani-slideDownN { 0% { transform: translateY(-100%); } 100% { transform: translateY(0%); } } /* ============================================== flani-scaleXright ============================================== */ .flani-scaleXright{ transform: scaleX(0); animation-name: flani-scaleXright; -webkit-animation-name: flani-scaleXright; animation-duration: .6s; -webkit-animation-duration: .6s; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; transform-origin: right; -ms-transform-origin: right; -webkit-transform-origin: right; visibility: visible !important; } @keyframes flani-scaleXright { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } } @-webkit-keyframes flani-scaleXright { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } } /* ============================================== flani-scaleXleft ============================================== */ .flani-scaleXleft{ transform: scaleX(0); animation-name: flani-scaleXleft; -webkit-animation-name: flani-scaleXleft; animation-duration: .6s; -webkit-animation-duration: .6s; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; transform-origin: left; -ms-transform-origin: left; -webkit-transform-origin: left; visibility: visible !important; } @keyframes flani-scaleXleft { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } } @-webkit-keyframes flani-scaleXleft { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } } /* ============================================== flani-scaleYtop ============================================== */ .flani-scaleYtop{ transform: scaleY(0); animation-name: flani-scaleYtop; -webkit-animation-name: flani-scaleYtop; animation-duration: .6s; -webkit-animation-duration: .6s; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; transform-origin: top; -ms-transform-origin: top; -webkit-transform-origin: top; visibility: visible !important; } @keyframes flani-scaleYtop { 0% { transform: scaleY(0); } 100% { transform: scaleY(1); } } @-webkit-keyframes flani-scaleYtop { 0% { transform: scaleY(0); } 100% { transform: scaleY(1); } } /* ============================================== flani-scaleYbottom ============================================== */ .flani-scaleYbottom{ transform: scaleY(0); animation-name: flani-scaleYbottom; -webkit-animation-name: flani-scaleYbottom; animation-duration: .6s; -webkit-animation-duration: .6s; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; transform-origin: bottom; -ms-transform-origin: bottom; -webkit-transform-origin: bottom; visibility: visible !important; } @keyframes flani-scaleYbottom { 0% { transform: scaleY(0); } 100% { transform: scaleY(1); } } @-webkit-keyframes flani-scaleYbottom { 0% { transform: scaleY(0); } 100% { transform: scaleY(1); } } /* ============================================== flani-zoomIn ============================================== */ .flani-zoomIn{ transform: scale(0); animation-name: flani-zoomIn; -webkit-animation-name: flani-zoomIn; animation-duration: .6s; -webkit-animation-duration: .6s; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; transform-origin: center center; -ms-transform-origin: center center; -webkit-transform-origin: center center; visibility: visible !important; } @keyframes flani-zoomIn { 0% { transform: scale(0); } 100% { transform: scale(1); } } @-webkit-keyframes flani-zoomIn { 0% { transform: scale(0); } 100% { transform: scale(1); } } /* ============================================== flani-zoomOut ============================================== */ .flani-zoomOut{ transform: scale(1.6); animation-name: flani-zoomOut; -webkit-animation-name: flani-zoomOut; animation-duration: .6s; -webkit-animation-duration: .6s; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; transform-origin: center center; -ms-transform-origin: center center; -webkit-transform-origin: center center; visibility: visible !important; } @keyframes flani-zoomOut { 0% { transform: scale(1.6); } 100% { transform: scale(1); } } @-webkit-keyframes flani-zoomOut { 0% { transform: scale(1.6); } 100% { transform: scale(1); } } /* ============================================== flani-zoomInSlow ============================================== */ .flani-zoomInSlow {overflow:hidden;} .flani-zoomInSlow > div{ transform: scale(1); animation-name: flani-zoomInSlow; -webkit-animation-name: flani-zoomInSlow; animation-duration: 24s !important; -webkit-animation-duration: 24s !important; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%; visibility: visible !important; } @keyframes flani-zoomInSlow{ 0% { transform: scale(1); } 50% { transform: scale(2.4); } 100% { transform: scale(1); } } @-webkit-keyframes flani-zoomInSlow { 0% { transform: scale(1); } 50% { transform: scale(2.4); } 100% { transform: scale(1); } } /* ============================================== flani-zoomOutSlow ============================================== */ .flani-zoomOutSlow {overflow:hidden;} .flani-zoomOutSlow > div { transform: scale(2.4); animation-name: flani-zoomOutSlow; -webkit-animation-name: flani-zoomOutSlow; animation-duration: 24s !important; -webkit-animation-duration: 24s !important; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%; visibility: visible !important; } @keyframes flani-zoomOutSlow { 0% { transform: scale(2.4); } 50% { transform: scale(1); } 100% { transform: scale(2.4); } } @-webkit-keyframes flani-zoomOutSlow { 0% { transform: scale(2.4); } 50% { transform: scale(1); } 100% { transform: scale(2.4); } } /* ============================================== flani-fadeInLeft ============================================== */ .flani-fadeInLeft{ transform: translateX(150%); opacity:0; animation-name: flani-fadeInLeft; -webkit-animation-name: flani-fadeInLeft; animation-duration: .6s; -webkit-animation-duration: .6s; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -webkit-transform-origin: 0% 0%; visibility: visible !important; } @keyframes flani-fadeInLeft { 0% { transform: translateX(150%); opacity:0; } 100% { transform: translateX(0%); opacity:1; } } @-webkit-keyframes flani-fadeInLeft { 0% { transform: translateX(150%); opacity:0; } 100% { transform: translateX(0%); opacity:1; } } /* ============================================== flani-fadeInRight ============================================== */ .flani-fadeInRight{ transform: translateX(-150%); opacity:0; animation-name: flani-fadeInRight; -webkit-animation-name: flani-fadeInRight; animation-duration: .6s; -webkit-animation-duration: .6s; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -webkit-transform-origin: 0% 0%; visibility: visible !important; } @keyframes flani-fadeInRight { 0% { transform: translateX(-150%); opacity:0; } 100% { transform: translateX(0%); opacity:1; } } @-webkit-keyframes flani-fadeInRight { 0% { transform: translateX(-150%); opacity:0; } 100% { transform: translateX(0%); opacity:1; } } /* ============================================== flani-fadeInUp ============================================== */ .flani-fadeInUp{ transform: translateY(100%); opacity:0; animation-name: flani-fadeInUp; -webkit-animation-name: flani-fadeInUp; animation-duration: .6s; -webkit-animation-duration: .6s; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -webkit-transform-origin: 0% 0%; visibility: visible !important; } @keyframes flani-fadeInUp { 0% { transform: translateY(100%); opacity:0; } 100% { transform: translateY(0%); opacity:1; } } @-webkit-keyframes flani-fadeInUp { 0% { transform: translateY(100%); opacity:0; } 100% { transform: translateY(0%); opacity:1; } } /* ============================================== flani-fadeInDown ============================================== */ .flani-fadeInDown{ transform: translateY(-100%); opacity:0; animation-name: flani-fadeInDown; -webkit-animation-name: flani-fadeInDown; animation-duration: .6s; -webkit-animation-duration: .6s; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -webkit-transform-origin: 0% 0%; visibility: visible !important; } @keyframes flani-fadeInDown { 0% { transform: translateY(-100%); opacity:0; } 100% { transform: translateY(0%); opacity:1; } } @-webkit-keyframes flani-fadeInDown { 0% { transform: translateY(-100%); opacity:0; } 100% { transform: translateY(0%); opacity:1; } } /* ============================================== TEXT ANIMATIONS ============================================== */ .textAnimation div{ display: inline-block; } .textAnimation .period { display:block; } .textAnimation .element, .textAnimation .period { width: 100%; } /* ============================================== FADE ============================================== */ .textAnimation .fade{ opacity: 0; visibility: hidden; animation: text_fade; animation-iteration-count: 1; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; animation-duration: .2s; -webkit-animation-duration: .2s; } /* ============================================== TRANSLATE X ============================================== */ .textAnimation .translateX { transform: translateX(700px); animation: text_translateX; animation-iteration-count: 1; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; animation-duration: .2s; -webkit-animation-duration: .2s; } /* ============================================== TRANSLATE X + FADE ============================================== */ .textAnimation .translateXFade { transform: translateX(700px); opacity: 0; animation: text_translateXFade; animation-iteration-count: 1; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; animation-duration: .2s; -webkit-animation-duration: .2s; } /* ============================================== TRASLATE Y ALTERNATE TOP BOTTOM ============================================== */ .textAnimation .translateYTopBottom:nth-child(odd) { transform: translateY(400px); animation: text_translateYTop; animation-iteration-count: 1; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; animation-duration: .2s; -webkit-animation-duration: .2s; } .textAnimation .translateYTopBottom:nth-child(even) { transform: translateY(-400px); animation: text_translateYBottom; animation-iteration-count: 1; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; animation-duration: .2s; -webkit-animation-duration: .2s; } /* ============================================== TRANSLATE Y TOP ============================================== */ .textAnimation .translateYTop { transform: translateY(400px); animation: text_translateYTop; animation-iteration-count: 1; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; animation-duration: .2s; -webkit-animation-duration: .2s; } /* ============================================== TRANSLATE Y BOTTOM ============================================== */ .textAnimation .translateYBottom { transform: translateY(-400px); animation: text_translateYBottom; animation-iteration-count: 1; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; animation-duration: .2s; -webkit-animation-duration: .2s; } /* ============================================== TRASLATE Y ALTERNATE TOP BOTTOM + FADE ============================================== */ .textAnimation .translateYTopBottomFade:nth-child(odd) { opacity: 0; transform: translateY(400px); animation: text_translateYTopFade; animation-iteration-count: 1; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; animation-duration: .2s; -webkit-animation-duration: .2s; } .textAnimation .translateYTopBottomFade:nth-child(even) { opacity: 0; transform: translateY(-400px); animation: text_translateYBottomFade; animation-iteration-count: 1; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; animation-duration: .2s; -webkit-animation-duration: .2s; } /* ============================================== TRANSLATE Y TOP + FADE ============================================== */ .textAnimation .translateYTopFade { opacity: 0; transform: translateY(400px); animation: text_translateYTopFade; animation-iteration-count: 1; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; animation-duration: .2s; -webkit-animation-duration: .2s; } /* ============================================== TRANSLATE Y BOTTOM + FADE ============================================== */ .textAnimation .translateYBottomFade { opacity: 0; transform: translateY(-400px); animation: text_translateYBottomFade; animation-iteration-count: 1; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; animation-duration: .2s; -webkit-animation-duration: .2s; } /* ============================================== BLUR ============================================== */ .textAnimation .blur { filter: blur(4px); opacity: 0; animation: text_blur; animation-iteration-count: 1; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; animation-duration: .2s; -webkit-animation-duration: .2s; } /* ============================================== TRANSLATE X + SKEW X ============================================== */ .textAnimation .translateXSkewX { transform: translateX(700px) skewX(30deg); animation: text_translateXSkewX; animation-iteration-count: 1; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; animation-duration: .2s; -webkit-animation-duration: .2s; } /* ============================================== ZOOM OUT ============================================== */ .textAnimation .zoomOut { transform: scale(2); opacity: 0; animation: text_zoomOut; animation-iteration-count: 1; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; animation-duration: .2s; -webkit-animation-duration: .2s; } /* ============================================== ZOOM IN ============================================== */ .textAnimation .zoomIn { transform: scale(0); animation: text_zoomIn; animation-iteration-count: 1; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; animation-duration: .2s; -webkit-animation-duration: .2s; } @keyframes text_blur { from {opacity: 0;filter: blur(4px);} to {opacity: 1;filter: blur(0);} } @keyframes text_fade { from {opacity: 0;visibility: hidden;} to {opacity: 1;visibility: visible;} } @keyframes text_translateX { from {transform: translateX(700px);} to {transform: translateX(0);} } @keyframes text_translateXFade { from {transform: translateX(700px);opacity: 0;} to {transform: translateX(0);opacity: 1;} } @keyframes text_translateYTop { from {transform: translateY(400px);} to {transform: translateX(0);} } @keyframes text_translateYBottom { from {transform: translateY(-400px);} to {transform: translateX(0);} } @keyframes text_translateYTopFade { from {transform: translateY(400px);opacity: 0;} to {transform: translateX(0);opacity: 1;} } @keyframes text_translateYBottomFade { from {transform: translateY(-400px);opacity: 0;} to {transform: translateX(0);opacity: 1;} } @keyframes text_translateXSkewX { 0% {transform: translateX(700px) skewX(30deg);} 99% {transform: skewX(30deg);} 100% {transform: translateX(0) skewX(0deg);} } @keyframes text_zoomOut { from {transform: scale(2);opacity: 0;} to {transform: scale(1);opacity: 1;} } @keyframes text_zoomIn { from {transform: scale(0);} to {transform: scale(1);} } /* ============================================== REVOLVE SCALE ============================================== */ .textAnimation .revolveScale { opacity: 0; transform: translate(-150px, -50px) rotate(-180deg) scale(3); animation: text_revolveScale; -webkit-animation: text_revolveScale; animation-iteration-count: 1; -webkit-animation-iteration-count: 1; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; animation-duration: .2s; -webkit-animation-duration: .2s; } /* ============================================== BALL DROP ============================================== */ .textAnimation .ballDrop { opacity: 0; transform: translate(200px, -100px) scale(2); animation: text_ballDrop; -webkit-animation: text_ballDrop; animation-iteration-count: 1; -webkit-animation-iteration-count: 1; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; animation-duration: .2s; -webkit-animation-duration: .2s; } /* ============================================== SIDE SLIDE ============================================== */ .textAnimation .sideSlide { opacity: 0; transform: translate(-300px, 0) scale(0); animation: text_sideSlide; -webkit-animation: text_sideSlide; animation-iteration-count: 1; -webkit-animation-iteration-count: 1; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; animation-duration: .2s; -webkit-animation-duration: .2s; } /* ============================================== REVOLVE DROP ============================================== */ .textAnimation .revolveDrop { opacity: 0; transform: translate(0, -100px) rotate(360deg) scale(0); animation: text_revolveDrop; -webkit-animation: text_revolveDrop; animation-iteration-count: 1; -webkit-animation-iteration-count: 1; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; animation-duration: .2s; -webkit-animation-duration: .2s; } /* ============================================== DROP VANISH ============================================== */ .textAnimation .dropVanish { opacity: 0; transform: translate(0, -100px) rotate(360deg) scale(0); animation: text_dropVanish; -webkit-animation: text_dropVanish; animation-iteration-count: 1; -webkit-animation-iteration-count: 1; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; animation-duration: .2s; -webkit-animation-duration: .2s; } /* ============================================== TWISTER ============================================== */ .textAnimation .twister { opacity: 0; transform: rotate(-180deg) translate(150px, 0); animation: text_twister; -webkit-animation: text_twister; animation-iteration-count: 1; -webkit-animation-iteration-count: 1; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; animation-duration: .2s; -webkit-animation-duration: .2s; } /* ============================================== LEFT RIGHT ============================================== */ .textAnimation .leftRight { opacity: 0; transform: translate(-150px, 0) scale(.3); animation: text_leftRight; -webkit-animation: text_leftRight; animation-iteration-count: 1; -webkit-animation-iteration-count: 1; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; animation-duration: .2s; -webkit-animation-duration: .2s; } @keyframes text_revolveScale { 60% { transform: translate(20px, 20px) rotate(30deg) scale(.3); } 100% { transform: translate(0) rotate(0) scale(1); opacity: 1; } } @keyframes text_ballDrop { 60% { transform: translate(0, 20px) rotate(-180deg) scale(.5); } 100% { transform: translate(0) rotate(0deg) scale(1); opacity: 1; } } @keyframes text_sideSlide { 60% { transform: translate(20px, 0) scale(1); } 80% { transform: translate(20px, 0) scale(1); } 99% { transform: translate(0) scale(1.2); } 100% { transform: translate(0) scale(1); opacity: 1; } } @keyframes text_revolveDrop { 30% { transform: translate(0, -50px) rotate(180deg) scale(1); } 60% { transform: translate(0, 20px) scale(.8) rotate(0deg); } 100% { transform: translate(0) scale(1) rotate(0deg); opacity: 1; } } @keyframes text_dropVanish { 30% { transform: translate(0, -50px) rotate(180deg) scale(1); } 50% { transform: translate(0, 20px) scale(.8) rotate(0deg); opacity: 1; } 80% { transform: translate(-100px, -100px) scale(1.5) rotate(-180deg); opacity: 0; } 100% { transform: translate(0) scale(1) rotate(0deg); opacity: 1; } } @keyframes text_twister { 10% { opacity: 1; } 100% { transform: rotate(0deg) translate(0); opacity: 1; } } @keyframes text_leftRight { 40% { transform: translate(50px, 0) scale(.7); opacity: 1; } 80% { transform: translate(0) scale(2); opacity: 0; } 100% { transform: translate(0) scale(1); opacity: 1; } }