Created
February 10, 2014 19:29
-
-
Save mmerriweather/8922506 to your computer and use it in GitHub Desktop.
==============================================
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| ============================================== | |
| CSS3 ANIMATION CHEAT SHEET | |
| ============================================== | |
| Made by Justin Aguilar | |
| www.justinaguilar.com/animations/ | |
| Questions, comments, concerns, love letters: | |
| justin@justinaguilar.com | |
| ============================================== | |
| */ | |
| /* | |
| ============================================== | |
| 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; | |
| visibility: visible !important; | |
| } | |
| @keyframes 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 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%); | |
| } | |
| } | |
| /* | |
| ============================================== | |
| 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; | |
| 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%); | |
| } | |
| } | |
| @-webkit-keyframes 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%); | |
| } | |
| } | |
| /* | |
| ============================================== | |
| slideLeft | |
| ============================================== | |
| */ | |
| .slideLeft{ | |
| animation-name: slideLeft; | |
| -webkit-animation-name: slideLeft; | |
| animation-duration: 1s; | |
| -webkit-animation-duration: 1s; | |
| animation-timing-function: ease-in-out; | |
| -webkit-animation-timing-function: ease-in-out; | |
| visibility: visible !important; | |
| } | |
| @keyframes 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 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%); | |
| } | |
| } | |
| /* | |
| ============================================== | |
| slideRight | |
| ============================================== | |
| */ | |
| .slideRight{ | |
| animation-name: slideRight; | |
| -webkit-animation-name: slideRight; | |
| animation-duration: 1s; | |
| -webkit-animation-duration: 1s; | |
| animation-timing-function: ease-in-out; | |
| -webkit-animation-timing-function: ease-in-out; | |
| visibility: visible !important; | |
| } | |
| @keyframes 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 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%); | |
| } | |
| } | |
| /* | |
| ============================================== | |
| slideExpandUp | |
| ============================================== | |
| */ | |
| .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); | |
| } | |
| } | |
| /* | |
| ============================================== | |
| expandUp | |
| ============================================== | |
| */ | |
| .expandUp{ | |
| animation-name: expandUp; | |
| -webkit-animation-name: expandUp; | |
| animation-duration: 0.7s; | |
| -webkit-animation-duration: 0.7s; | |
| 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); | |
| } | |
| } | |
| /* | |
| ============================================== | |
| fadeIn | |
| ============================================== | |
| */ | |
| .fadeIn{ | |
| animation-name: fadeIn; | |
| -webkit-animation-name: fadeIn; | |
| animation-duration: 1.5s; | |
| -webkit-animation-duration: 1.5s; | |
| 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.1); | |
| } | |
| 80% { | |
| transform: scale(0.9); | |
| opacity: 1; | |
| } | |
| 100% { | |
| transform: scale(1); | |
| opacity: 1; | |
| } | |
| } | |
| @-webkit-keyframes fadeIn { | |
| 0% { | |
| -webkit-transform: scale(0); | |
| opacity: 0.0; | |
| } | |
| 60% { | |
| -webkit-transform: scale(1.1); | |
| } | |
| 80% { | |
| -webkit-transform: scale(0.9); | |
| opacity: 1; | |
| } | |
| 100% { | |
| -webkit-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); | |
| } | |
| } | |
| @-webkit-keyframes 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); | |
| } | |
| } | |
| /* | |
| ============================================== | |
| 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; | |
| } | |
| } | |
| @-webkit-keyframes 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; | |
| } | |
| } | |
| /* | |
| ============================================== | |
| hatch | |
| ============================================== | |
| */ | |
| .hatch{ | |
| animation-name: hatch; | |
| -webkit-animation-name: hatch; | |
| animation-duration: 2s; | |
| -webkit-animation-duration: 2s; | |
| 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 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 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); | |
| } | |
| } | |
| /* | |
| ============================================== | |
| bounce | |
| ============================================== | |
| */ | |
| .bounce{ | |
| animation-name: bounce; | |
| -webkit-animation-name: bounce; | |
| animation-duration: 1.6s; | |
| -webkit-animation-duration: 1.6s; | |
| animation-timing-function: ease; | |
| -webkit-animation-timing-function: ease; | |
| transform-origin: 50% 100%; | |
| -ms-transform-origin: 50% 100%; | |
| -webkit-transform-origin: 50% 100%; | |
| } | |
| @keyframes 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 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); | |
| } | |
| } | |
| /* | |
| ============================================== | |
| pulse | |
| ============================================== | |
| */ | |
| .pulse{ | |
| animation-name: pulse; | |
| -webkit-animation-name: pulse; | |
| animation-duration: 1.5s; | |
| -webkit-animation-duration: 1.5s; | |
| 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; | |
| } | |
| } | |
| /* | |
| ============================================== | |
| floating | |
| ============================================== | |
| */ | |
| .floating{ | |
| animation-name: floating; | |
| -webkit-animation-name: floating; | |
| animation-duration: 1.5s; | |
| -webkit-animation-duration: 1.5s; | |
| animation-iteration-count: infinite; | |
| -webkit-animation-iteration-count: infinite; | |
| } | |
| @keyframes floating { | |
| 0% { | |
| transform: translateY(0%); | |
| } | |
| 50% { | |
| transform: translateY(8%); | |
| } | |
| 100% { | |
| transform: translateY(0%); | |
| } | |
| } | |
| @-webkit-keyframes floating { | |
| 0% { | |
| -webkit-transform: translateY(0%); | |
| } | |
| 50% { | |
| -webkit-transform: translateY(8%); | |
| } | |
| 100% { | |
| -webkit-transform: translateY(0%); | |
| } | |
| } | |
| /* | |
| ============================================== | |
| tossing | |
| ============================================== | |
| */ | |
| .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; | |
| } | |
| @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); | |
| } | |
| } | |
| /* | |
| ============================================== | |
| pullUp | |
| ============================================== | |
| */ | |
| .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.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 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); | |
| } | |
| } | |
| /* | |
| ============================================== | |
| pullDown | |
| ============================================== | |
| */ | |
| .pullDown{ | |
| animation-name: pullDown; | |
| -webkit-animation-name: pullDown; | |
| animation-duration: 1.1s; | |
| -webkit-animation-duration: 1.1s; | |
| 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%; | |
| } | |
| @keyframes 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 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); | |
| } | |
| } | |
| /* | |
| ============================================== | |
| stretchLeft | |
| ============================================== | |
| */ | |
| .stretchLeft{ | |
| animation-name: stretchLeft; | |
| -webkit-animation-name: stretchLeft; | |
| animation-duration: 1.5s; | |
| -webkit-animation-duration: 1.5s; | |
| 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); | |
| } | |
| } | |
| /* | |
| ============================================== | |
| stretchRight | |
| ============================================== | |
| */ | |
| .stretchRight{ | |
| animation-name: stretchRight; | |
| -webkit-animation-name: stretchRight; | |
| animation-duration: 1.5s; | |
| -webkit-animation-duration: 1.5s; | |
| 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%; | |
| } | |
| @keyframes 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 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); | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div id="object" class="slideUp"> | |
| <img src="http://www.justinaguilar.com/animations/images/phone.png" alt="Image of a phone" id="phone" class="animate" /> | |
| <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. .slideUp</h2> | |
| </div> | |
| <div id="object" class="slideLeft"> | |
| <img src="http://www.justinaguilar.com/animations/images/phone.png" alt="Image of a phone" id="phone" class="animate" /> | |
| <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. .slideLeft</h2> | |
| </div> | |
| <div id="object" class="hatch"> | |
| <img src="http://www.justinaguilar.com/animations/images/phone.png" alt="Image of a phone" id="phone" class="animate" /> | |
| <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. .hatch</h2> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function(){ | |
| //get the background-color for each tile and apply it as background color for the cooresponding screen | |
| $('.tile').each(function(){ | |
| var $this= $(this), | |
| page = $this.data('page-name'), | |
| bgcolor = $this.css('background-color'), | |
| textColor = $this.css('color'); | |
| //if the tile rotates, we'll use the colors of the front face | |
| if($this.hasClass('rotate3d')) { | |
| frontface = $this.find('.front'); | |
| bgcolor = frontface.css('background-color'); | |
| textColor = frontface.css('color'); | |
| } | |
| //if the tile has an image and a caption, we'll use the caption styles | |
| if($this.hasClass('fig-tile')) { | |
| caption = $this.find('figcaption'); | |
| bgcolor = caption.css('background-color'); | |
| textColor = caption.css('color'); | |
| } | |
| $this.on('click',function(){ | |
| $('.'+page).css({'background-color': bgcolor, 'color': textColor}) | |
| .find('.close-button').css({'background-color': textColor, 'color': bgcolor}); | |
| }); | |
| }); | |
| function showDashBoard(){ | |
| for(var i = 1; i <= 3; i++) { | |
| $('.col'+i).each(function(){ | |
| $(this).addClass('fadeInForward-'+i).removeClass('fadeOutback'); | |
| }); | |
| } | |
| } | |
| function fadeDashBoard(){ | |
| for(var i = 1; i <= 3; i++) { | |
| $('.col'+i).addClass('fadeOutback').removeClass('fadeInForward-'+i); | |
| } | |
| } | |
| //listen for when a tile is clicked | |
| //retrieve the type of page it opens from its data attribute | |
| //based on the type of page, add corresponding class to page and fade the dashboard | |
| $('.tile').each(function(){ | |
| var $this= $(this), | |
| pageType = $this.data('page-type'), | |
| page = $this.data('page-name'); | |
| $this.on('click',function(){ | |
| if(pageType === "s-page"){ | |
| fadeDashBoard(); | |
| $('.'+page).addClass('slidePageInFromLeft').removeClass('slidePageBackLeft'); | |
| } | |
| else{ | |
| $('.'+page).addClass('openpage'); | |
| fadeDashBoard(); | |
| } | |
| }); | |
| }); | |
| //when a close button is clicked: | |
| //close the page | |
| //wait till the page is closed and fade dashboard back in | |
| $('.r-close-button').click(function(){ | |
| $(this).parent().addClass('slidePageLeft') | |
| .one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) { | |
| $(this).removeClass('slidePageLeft').removeClass('openpage'); | |
| }); | |
| showDashBoard(); | |
| }); | |
| $('.s-close-button').click(function(){ | |
| $(this).parent().removeClass('slidePageInFromLeft').addClass('slidePageBackLeft'); | |
| showDashBoard(); | |
| }); | |
| })(); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"javascript"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment