rocknrollMarc / animation.css

/*============================================== CSS3 ANIMATION CHEAT SHEET ======================================================================================== slideLeft - slideRight - slideExpandUp - bigEntrance - expandUp - pulse - expandOpen - fadeinup - tossing ======================================================================================== www.justinaguilar.com/animations/ justin@justinaguilar.com ==============================================*/ /* ============================================== slideUp ============================================== */ .slideUp{animation-name: slideUp;animation-duration: 1.5s;visibility: visible !important; } @keyframes 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%); }} /* ============================================== fadeInUp ============================================== */ .fadeInUp{animation-name: fadeInUp;animation-duration: 1s;visibility: visible !important; } @keyframes fadeInUp { 0% {opacity: 0;transform: translate3d(0, 100%, 0); } 100% {opacity: 1;-webkit-transform: none;transform: none; }} /* ============================================== flipInY ============================================== */ .flipInY{animation-name: flipInY;animation-duration: 1s;visibility: visible !important; } @keyframes flipInY { 0% {-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } 40% {-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);transform: perspective(400px) rotate3d(0, 1, 0, -20deg); } 60% {-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% {-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } 100% {-webkit-transform: perspective(400px);transform: perspective(400px); }} /* ============================================== fadeInDown ============================================== */ .fadeInDown{animation-name: slideLeft;animation-duration: 1s;visibility: visible !important; } @keyframes fadeInDown { 0% {opacity: 0;-webkit-transform: translate3d(0, -100%, 0);transform: translate3d(0, -100%, 0); } 100% {opacity: 1;-webkit-transform: none;transform: none; }} /* ============================================== zoomInUp ============================================== */ .zoomInUp{animation-name: zoomInUp;animation-duration: 1.5s;visibility: visible !important; opacity: 1; } @keyframes zoomInUp { 0% {opacity: 0;transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% {opacity: 1;transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } /* ============================================== fadeInLeft ============================================== */ .fadeInLeft{animation-name: fadeInLeft;animation-duration: 0.8s;visibility: visible !important; } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } /* ============================================== fadeInRight ============================================== */ .fadeInRight{animation-name: fadeInRight;animation-duration: 0.8s;visibility: visible !important; } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } /* ============================================== slideExpandUp ============================================== */ .slideExpandUp{animation-name: slideExpandUp;animation-duration: 1.5s;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); }} /* ============================================== fadeIn ============================================== */ .fadeIn{animation-name: fadeIn;-webkit-animation-name: fadeIn;animation-duration: 1s;-webkit-animation-duration: 1s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; visibility: visible !important; } @keyframes fadeIn { 0% {transform: scale(0);opacity: 0.0; } 60% {transform: scale(1); } 80% {transform: scale(0.9);opacity: 1; } 100% {transform: scale(1);opacity: 1; }} /* ============================================== expandOpen ============================================== */ .expandOpen{animation-name: expandOpen;-webkit-animation-name: expandOpen;animation-duration: 1.2s; -webkit-animation-duration: 1.2s;animation-timing-function: ease-out;-webkit-animation-timing-function: ease-out;visibility: visible !important; } @keyframes 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); }} /* ============================================== bigEntrance ============================================== */ .bigEntrance{animation-name: bigEntrance;-webkit-animation-name: bigEntrance;animation-duration: 1.6s;-webkit-animation-duration: 1.6s;animation-timing-function: ease-out;-webkit-animation-timing-function: ease-out; visibility: visible !important; } @keyframes 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; }} /* ============================================== pulse ============================================== */ .pulse{animation-name: pulse;-webkit-animation-name: pulse;animation-duration: 1s;-webkit-animation-duration: 1s; animation-iteration-count: infinite;-webkit-animation-iteration-count: infinite;visibility: visible !important; } @keyframes pulse { 0% {transform: scale(0.95); } 50% {transform: scale(1); } 100% {transform: scale(0.95); }} /* ============================================== expandUp ============================================== */ .expandUp{animation-name: expandUp;-webkit-animation-name: expandUp;animation-duration: 1.3s;-webkit-animation-duration: 1.3s; animation-timing-function: ease-out;-webkit-animation-timing-function: ease-out;transform-origin: 100% 100%; -ms-transform-origin: 100% 100%;-webkit-transform-origin: 100% 100%;visibility: visible !important; } @keyframes expandUp { 0% {transform: translatey(10%);opacity: 0; } 10%{transform: translateY(20%);opacity: 0; }} /* ============================================== tossing - none ============================================== */ .tossing{animation-name: tossing;-webkit-animation-name: tossing;animation-duration: 0s;-webkit-animation-duration: 0s; animation-timing-function: ease-out;-webkit-animation-timing-function: ease-out;transform-origin: 100% 100%; -ms-transform-origin: 100% 100%;-webkit-transform-origin: 100% 100%;visibility: visible !important; } @keyframes tossing {0% {transform: translatey(0%);} }