@keyframes animate_slideIn_fromTop_200px { from { top:-210px; opacity:0; } to { top:0; opacity:1; } } @keyframes animate_slideIn_fromBottom_200px { from { bottom:-210px; opacity:0; } to { bottom:0; opacity:1; } } @keyframes animate_slideIn_fromLeft_200px { from { left:-130px; opacity:0; } to { left:0; opacity:1; } } @keyframes animate_slideIn_fromRight_200px { from { right:-130px; opacity:0; } to { right:0; opacity:1; } } .animate_old-top { animation-name: animatetop; animation-duration: 0.3s; } @keyframes animatetop { from {top: -300px; opacity: 0} to {top: 0; opacity: 1} } @keyframes animateMenu { from {opacity: 0} to {opacity: 1} } @keyframes animateMenuDropper { from { opacity:0; transform: translateY(-20%) } to { opacity:1; transform: translateY(0%) } } .animate_fadeIn { animation-name: fadeIn; animation-duration: 0.5s; } @keyframes fadeIn { from {opacity: 0} to {opacity: 1} } /*___________________________ ENTRANCES ___________________________*/ .stretchLeft { animation-name: stretchLeft; -webkit-animation-name: stretchLeft; animation-duration: 1s; -webkit-animation-duration: 1s; 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%; } @keyframes 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 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); } } .pullUp { animation-name: pullUp; -webkit-animation-name: pullUp; animation-duration: 1.1s; -webkit-animation-duration: 1.1s; 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%; } @keyframes pullUp { 0% { transform: scaleY(0.1); } 40% { transform: scaleY(1); } 60% { transform: scaleY(1); } 80% { transform: scaleY(1); } 100% { transform: scaleY(1); } /*80% { transform: scaleY(1); } 100% { transform: scaleY(1); }*/ } @-webkit-keyframes pullUp { 0% { -webkit-transform: scaleY(0.1); } 40% { -webkit-transform: scaleY(1); } 60% { -webkit-transform: scaleY(1); } 80% { -webkit-transform: scaleY(1); } 100% { -webkit-transform: scaleY(1); } } .animate-expandUp { animation-name: expandUp; -webkit-animation-name: expandUp; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease; -webkit-animation-timing-function: ease; visibility: visible !important; } @keyframes 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 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); } } .animate-slideExpandUp { animation-name: slideExpandUp; -webkit-animation-name: slideExpandUp; animation-duration: 1.6s; -webkit-animation-duration: 1.6s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; visibility: visible !important; } @keyframes 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 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); } } /* shakes at end */ .flipInX { -webkit-animation-name: flipInX; animation-name: flipInX; animation-duration: 1.1s; -webkit-animation-duration: 1.1s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; } @keyframes flipInX { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } /* no shake at end */ .flipInX-soft { -webkit-animation-name: flipInX-soft; animation-name: flipInX-soft; animation-duration: 1.1s; -webkit-animation-duration: 1.1s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; } @keyframes flipInX-soft { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } /* HOVERS */ .animate-pulse { animation-name: pulse; -webkit-animation-name: pulse; animation-duration: 2s; -webkit-animation-duration: 2s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } @keyframes 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 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; } } .animate-float { animation-name: float; -webkit-animation-name: float; animation-duration: 2s; -webkit-animation-duration: 2s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } @keyframes float { 0% { transform: translateY(0%); } 50% { transform: translateY(8%); } 100% { transform: translateY(0%); } } @-webkit-keyframes float { 0% { -webkit-transform: translateY(0%); } 50% { -webkit-transform: translateY(8%); } 100% { -webkit-transform: translateY(0%); } } .animate-tossing { animation-name: tossing; -webkit-animation-name: tossing; animation-duration: 2.5s; -webkit-animation-duration: 2.5s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } .animate-tossingSlow { animation-name: tossing; -webkit-animation-name: tossing; animation-duration: 5s; -webkit-animation-duration: 5s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } @keyframes tossing { 0% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } 100% { transform: rotate(-4deg); } } @-webkit-keyframes tossing { 0% { -webkit-transform: rotate(-4deg); } 50% { -webkit-transform: rotate(4deg); } 100% { -webkit-transform: rotate(-4deg); } } .animate-left-right { animation-name: left-right; -webkit-animation-name: left-right; animation-duration: 4s; -webkit-animation-duration: 4s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } @keyframes left-right { 0% { transform: translateX(-8%); } 50% { transform: translateX(29%); } 100% { transform: translateX(-8%); } } @-webkit-keyframes left-right { 0% { -webkit-transform: translateX(-8%); } 50% { -webkit-transform: translateX(29%); } 100% { -webkit-transform: translateX(-8%); } } .animate-spin360 { animation-name: spin360; -webkit-animation-name: spin360; animation-duration: 8s; -webkit-animation-duration: 8s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } @keyframes spin360 { 0% { transform: rotate(0deg); } 50% { transform: rotate(180deg); } 100% { transform: rotate(0deg); } } @-webkit-keyframes spin360 { 0% { -webkit-transform: rotate(0deg); } 50% { -webkit-transform: rotate(180deg); } 100% { -webkit-transform: rotate(0deg); } }