2 ==============================================
\r
3 CSS3 ANIMATION CHEAT SHEET
\r
4 ==============================================
\r
6 Made by Justin Aguilar
\r
8 www.justinaguilar.com/animations/
\r
10 Questions, comments, concerns, love letters:
\r
11 justin@justinaguilar.com
\r
12 ==============================================
\r
16 ==============================================
\r
18 ==============================================
\r
23 animation-name: slideDown;
\r
24 -webkit-animation-name: slideDown;
\r
26 animation-duration: 1s;
\r
27 -webkit-animation-duration: 1s;
\r
29 animation-timing-function: ease;
\r
30 -webkit-animation-timing-function: ease;
\r
32 visibility: visible !important;
\r
35 @keyframes slideDown {
\r
37 transform: translateY(-100%);
\r
40 transform: translateY(8%);
\r
43 transform: translateY(-4%);
\r
46 transform: translateY(4%);
\r
49 transform: translateY(-2%);
\r
52 transform: translateY(0%);
\r
56 @-webkit-keyframes slideDown {
\r
58 -webkit-transform: translateY(-100%);
\r
61 -webkit-transform: translateY(8%);
\r
64 -webkit-transform: translateY(-4%);
\r
67 -webkit-transform: translateY(4%);
\r
70 -webkit-transform: translateY(-2%);
\r
73 -webkit-transform: translateY(0%);
\r
78 ==============================================
\r
80 ==============================================
\r
85 animation-name: slideUp;
\r
86 -webkit-animation-name: slideUp;
\r
88 animation-duration: 1s;
\r
89 -webkit-animation-duration: 1s;
\r
91 animation-timing-function: ease;
\r
92 -webkit-animation-timing-function: ease;
\r
94 visibility: visible !important;
\r
97 @keyframes slideUp {
\r
99 transform: translateY(100%);
\r
102 transform: translateY(-8%);
\r
105 transform: translateY(4%);
\r
108 transform: translateY(-4%);
\r
111 transform: translateY(2%);
\r
114 transform: translateY(0%);
\r
118 @-webkit-keyframes slideUp {
\r
120 -webkit-transform: translateY(100%);
\r
123 -webkit-transform: translateY(-8%);
\r
126 -webkit-transform: translateY(4%);
\r
129 -webkit-transform: translateY(-4%);
\r
132 -webkit-transform: translateY(2%);
\r
135 -webkit-transform: translateY(0%);
\r
140 ==============================================
\r
142 ==============================================
\r
147 animation-name: slideLeft;
\r
148 -webkit-animation-name: slideLeft;
\r
150 animation-duration: 1s;
\r
151 -webkit-animation-duration: 1s;
\r
153 animation-timing-function: ease-in-out;
\r
154 -webkit-animation-timing-function: ease-in-out;
\r
156 visibility: visible !important;
\r
159 @keyframes slideLeft {
\r
161 transform: translateX(150%);
\r
164 transform: translateX(-8%);
\r
167 transform: translateX(4%);
\r
170 transform: translateX(-4%);
\r
173 transform: translateX(2%);
\r
176 transform: translateX(0%);
\r
180 @-webkit-keyframes slideLeft {
\r
182 -webkit-transform: translateX(150%);
\r
185 -webkit-transform: translateX(-8%);
\r
188 -webkit-transform: translateX(4%);
\r
191 -webkit-transform: translateX(-4%);
\r
194 -webkit-transform: translateX(2%);
\r
197 -webkit-transform: translateX(0%);
\r
202 ==============================================
\r
204 ==============================================
\r
209 animation-name: slideRight;
\r
210 -webkit-animation-name: slideRight;
\r
212 animation-duration: 1s;
\r
213 -webkit-animation-duration: 1s;
\r
215 animation-timing-function: ease-in-out;
\r
216 -webkit-animation-timing-function: ease-in-out;
\r
218 visibility: visible !important;
\r
221 @keyframes slideRight {
\r
223 transform: translateX(-150%);
\r
226 transform: translateX(8%);
\r
229 transform: translateX(-4%);
\r
232 transform: translateX(4%);
\r
235 transform: translateX(-2%);
\r
238 transform: translateX(0%);
\r
242 @-webkit-keyframes slideRight {
\r
244 -webkit-transform: translateX(-150%);
\r
247 -webkit-transform: translateX(8%);
\r
250 -webkit-transform: translateX(-4%);
\r
253 -webkit-transform: translateX(4%);
\r
256 -webkit-transform: translateX(-2%);
\r
259 -webkit-transform: translateX(0%);
\r
264 ==============================================
\r
266 ==============================================
\r
271 animation-name: slideExpandUp;
\r
272 -webkit-animation-name: slideExpandUp;
\r
274 animation-duration: 1.6s;
\r
275 -webkit-animation-duration: 1.6s;
\r
277 animation-timing-function: ease-out;
\r
278 -webkit-animation-timing-function: ease -out;
\r
280 visibility: visible !important;
\r
283 @keyframes slideExpandUp {
\r
285 transform: translateY(100%) scaleX(0.5);
\r
288 transform: translateY(-8%) scaleX(0.5);
\r
291 transform: translateY(2%) scaleX(0.5);
\r
294 transform: translateY(0%) scaleX(1.1);
\r
297 transform: translateY(0%) scaleX(0.9);
\r
300 transform: translateY(0%) scaleX(1.05);
\r
303 transform: translateY(0%) scaleX(0.95);
\r
306 transform: translateY(0%) scaleX(1.02);
\r
309 transform: translateY(0%) scaleX(1);
\r
313 @-webkit-keyframes slideExpandUp {
\r
315 -webkit-transform: translateY(100%) scaleX(0.5);
\r
318 -webkit-transform: translateY(-8%) scaleX(0.5);
\r
321 -webkit-transform: translateY(2%) scaleX(0.5);
\r
324 -webkit-transform: translateY(0%) scaleX(1.1);
\r
327 -webkit-transform: translateY(0%) scaleX(0.9);
\r
330 -webkit-transform: translateY(0%) scaleX(1.05);
\r
333 -webkit-transform: translateY(0%) scaleX(0.95);
\r
336 -webkit-transform: translateY(0%) scaleX(1.02);
\r
339 -webkit-transform: translateY(0%) scaleX(1);
\r
344 ==============================================
\r
346 ==============================================
\r
351 animation-name: expandUp;
\r
352 -webkit-animation-name: expandUp;
\r
354 animation-duration: 0.7s;
\r
355 -webkit-animation-duration: 0.7s;
\r
357 animation-timing-function: ease;
\r
358 -webkit-animation-timing-function: ease;
\r
360 visibility: visible !important;
\r
363 @keyframes expandUp {
\r
365 transform: translateY(100%) scale(0.6) scaleY(0.5);
\r
368 transform: translateY(-7%) scaleY(1.12);
\r
371 transform: translateY(3%);
\r
374 transform: translateY(0%) scale(1) scaleY(1);
\r
378 @-webkit-keyframes expandUp {
\r
380 -webkit-transform: translateY(100%) scale(0.6) scaleY(0.5);
\r
383 -webkit-transform: translateY(-7%) scaleY(1.12);
\r
386 -webkit-transform: translateY(3%);
\r
389 -webkit-transform: translateY(0%) scale(1) scaleY(1);
\r
394 ==============================================
\r
396 ==============================================
\r
400 animation-name: fadeIn;
\r
401 -webkit-animation-name: fadeIn;
\r
403 animation-duration: 1.5s;
\r
404 -webkit-animation-duration: 1.5s;
\r
406 animation-timing-function: ease-in-out;
\r
407 -webkit-animation-timing-function: ease-in-out;
\r
409 visibility: visible !important;
\r
412 @keyframes fadeIn {
\r
414 transform: scale(0);
\r
418 transform: scale(1.1);
\r
421 transform: scale(0.9);
\r
425 transform: scale(1);
\r
430 @-webkit-keyframes fadeIn {
\r
432 -webkit-transform: scale(0);
\r
436 -webkit-transform: scale(1.1);
\r
439 -webkit-transform: scale(0.9);
\r
443 -webkit-transform: scale(1);
\r
449 ==============================================
\r
451 ==============================================
\r
456 animation-name: expandOpen;
\r
457 -webkit-animation-name: expandOpen;
\r
459 animation-duration: 1.2s;
\r
460 -webkit-animation-duration: 1.2s;
\r
462 animation-timing-function: ease-out;
\r
463 -webkit-animation-timing-function: ease-out;
\r
465 visibility: visible !important;
\r
468 @keyframes expandOpen {
\r
470 transform: scale(1.8);
\r
473 transform: scale(0.95);
\r
476 transform: scale(1.05);
\r
479 transform: scale(0.98);
\r
482 transform: scale(1);
\r
486 @-webkit-keyframes expandOpen {
\r
488 -webkit-transform: scale(1.8);
\r
491 -webkit-transform: scale(0.95);
\r
494 -webkit-transform: scale(1.05);
\r
497 -webkit-transform: scale(0.98);
\r
500 -webkit-transform: scale(1);
\r
505 ==============================================
\r
507 ==============================================
\r
512 animation-name: bigEntrance;
\r
513 -webkit-animation-name: bigEntrance;
\r
515 animation-duration: 1.6s;
\r
516 -webkit-animation-duration: 1.6s;
\r
518 animation-timing-function: ease-out;
\r
519 -webkit-animation-timing-function: ease-out;
\r
521 visibility: visible !important;
\r
524 @keyframes bigEntrance {
\r
526 transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);
\r
530 transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);
\r
534 transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);
\r
538 transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);
\r
542 transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);
\r
546 transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);
\r
550 transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
\r
555 @-webkit-keyframes bigEntrance {
\r
557 -webkit-transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);
\r
561 -webkit-transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);
\r
565 -webkit-transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);
\r
569 -webkit-transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);
\r
573 -webkit-transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);
\r
577 -webkit-transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);
\r
581 -webkit-transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
\r
587 ==============================================
\r
589 ==============================================
\r
593 animation-name: hatch;
\r
594 -webkit-animation-name: hatch;
\r
596 animation-duration: 2s;
\r
597 -webkit-animation-duration: 2s;
\r
599 animation-timing-function: ease-in-out;
\r
600 -webkit-animation-timing-function: ease-in-out;
\r
602 transform-origin: 50% 100%;
\r
603 -ms-transform-origin: 50% 100%;
\r
604 -webkit-transform-origin: 50% 100%;
\r
606 visibility: visible !important;
\r
611 transform: rotate(0deg) scaleY(0.6);
\r
614 transform: rotate(-2deg) scaleY(1.05);
\r
617 transform: rotate(2deg) scaleY(1);
\r
620 transform: rotate(-2deg);
\r
623 transform: rotate(1deg);
\r
626 transform: rotate(-1deg);
\r
629 transform: rotate(0deg);
\r
633 @-webkit-keyframes hatch {
\r
635 -webkit-transform: rotate(0deg) scaleY(0.6);
\r
638 -webkit-transform: rotate(-2deg) scaleY(1.05);
\r
641 -webkit-transform: rotate(2deg) scaleY(1);
\r
644 -webkit-transform: rotate(-2deg);
\r
647 -webkit-transform: rotate(1deg);
\r
650 -webkit-transform: rotate(-1deg);
\r
653 -webkit-transform: rotate(0deg);
\r
659 ==============================================
\r
661 ==============================================
\r
666 animation-name: bounce;
\r
667 -webkit-animation-name: bounce;
\r
669 animation-duration: 1.6s;
\r
670 -webkit-animation-duration: 1.6s;
\r
672 animation-timing-function: ease;
\r
673 -webkit-animation-timing-function: ease;
\r
675 transform-origin: 50% 100%;
\r
676 -ms-transform-origin: 50% 100%;
\r
677 -webkit-transform-origin: 50% 100%;
\r
680 @keyframes bounce {
\r
682 transform: translateY(0%) scaleY(0.6);
\r
685 transform: translateY(-100%) scaleY(1.1);
\r
688 transform: translateY(0%) scaleY(0.95) scaleX(1.05);
\r
691 transform: translateY(0%) scaleY(1.05) scaleX(1);
\r
694 transform: translateY(0%) scaleY(0.95) scaleX(1);
\r
697 transform: translateY(0%) scaleY(1) scaleX(1);
\r
701 @-webkit-keyframes bounce {
\r
703 -webkit-transform: translateY(0%) scaleY(0.6);
\r
706 -webkit-transform: translateY(-100%) scaleY(1.1);
\r
709 -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1.05);
\r
712 -webkit-transform: translateY(0%) scaleY(1.05) scaleX(1);
\r
715 -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1);
\r
718 -webkit-transform: translateY(0%) scaleY(1) scaleX(1);
\r
724 ==============================================
\r
726 ==============================================
\r
730 animation-name: pulse;
\r
731 -webkit-animation-name: pulse;
\r
733 animation-duration: 1.5s;
\r
734 -webkit-animation-duration: 1.5s;
\r
736 animation-iteration-count: infinite;
\r
737 -webkit-animation-iteration-count: infinite;
\r
742 transform: scale(0.9);
\r
746 transform: scale(1);
\r
750 transform: scale(0.9);
\r
755 @-webkit-keyframes pulse {
\r
757 -webkit-transform: scale(0.95);
\r
761 -webkit-transform: scale(1);
\r
765 -webkit-transform: scale(0.95);
\r
771 ==============================================
\r
773 ==============================================
\r
777 animation-name: floating;
\r
778 -webkit-animation-name: floating;
\r
780 animation-duration: 1.5s;
\r
781 -webkit-animation-duration: 1.5s;
\r
783 animation-iteration-count: infinite;
\r
784 -webkit-animation-iteration-count: infinite;
\r
787 @keyframes floating {
\r
789 transform: translateY(0%);
\r
792 transform: translateY(8%);
\r
795 transform: translateY(0%);
\r
799 @-webkit-keyframes floating {
\r
801 -webkit-transform: translateY(0%);
\r
804 -webkit-transform: translateY(8%);
\r
807 -webkit-transform: translateY(0%);
\r
812 ==============================================
\r
814 ==============================================
\r
818 animation-name: tossing;
\r
819 -webkit-animation-name: tossing;
\r
821 animation-duration: 2.5s;
\r
822 -webkit-animation-duration: 2.5s;
\r
824 animation-iteration-count: infinite;
\r
825 -webkit-animation-iteration-count: infinite;
\r
828 @keyframes tossing {
\r
830 transform: rotate(-4deg);
\r
833 transform: rotate(4deg);
\r
836 transform: rotate(-4deg);
\r
840 @-webkit-keyframes tossing {
\r
842 -webkit-transform: rotate(-4deg);
\r
845 -webkit-transform: rotate(4deg);
\r
848 -webkit-transform: rotate(-4deg);
\r
853 ==============================================
\r
855 ==============================================
\r
859 animation-name: pullUp;
\r
860 -webkit-animation-name: pullUp;
\r
862 animation-duration: 1.1s;
\r
863 -webkit-animation-duration: 1.1s;
\r
865 animation-timing-function: ease-out;
\r
866 -webkit-animation-timing-function: ease-out;
\r
868 transform-origin: 50% 100%;
\r
869 -ms-transform-origin: 50% 100%;
\r
870 -webkit-transform-origin: 50% 100%;
\r
873 @keyframes pullUp {
\r
875 transform: scaleY(0.1);
\r
878 transform: scaleY(1.02);
\r
881 transform: scaleY(0.98);
\r
884 transform: scaleY(1.01);
\r
887 transform: scaleY(0.98);
\r
890 transform: scaleY(1.01);
\r
893 transform: scaleY(1);
\r
897 @-webkit-keyframes pullUp {
\r
899 -webkit-transform: scaleY(0.1);
\r
902 -webkit-transform: scaleY(1.02);
\r
905 -webkit-transform: scaleY(0.98);
\r
908 -webkit-transform: scaleY(1.01);
\r
911 -webkit-transform: scaleY(0.98);
\r
914 -webkit-transform: scaleY(1.01);
\r
917 -webkit-transform: scaleY(1);
\r
922 ==============================================
\r
924 ==============================================
\r
928 animation-name: pullDown;
\r
929 -webkit-animation-name: pullDown;
\r
931 animation-duration: 1.1s;
\r
932 -webkit-animation-duration: 1.1s;
\r
934 animation-timing-function: ease-out;
\r
935 -webkit-animation-timing-function: ease-out;
\r
937 transform-origin: 50% 0%;
\r
938 -ms-transform-origin: 50% 0%;
\r
939 -webkit-transform-origin: 50% 0%;
\r
942 @keyframes pullDown {
\r
944 transform: scaleY(0.1);
\r
947 transform: scaleY(1.02);
\r
950 transform: scaleY(0.98);
\r
953 transform: scaleY(1.01);
\r
956 transform: scaleY(0.98);
\r
959 transform: scaleY(1.01);
\r
962 transform: scaleY(1);
\r
966 @-webkit-keyframes pullDown {
\r
968 -webkit-transform: scaleY(0.1);
\r
971 -webkit-transform: scaleY(1.02);
\r
974 -webkit-transform: scaleY(0.98);
\r
977 -webkit-transform: scaleY(1.01);
\r
980 -webkit-transform: scaleY(0.98);
\r
983 -webkit-transform: scaleY(1.01);
\r
986 -webkit-transform: scaleY(1);
\r
991 ==============================================
\r
993 ==============================================
\r
997 animation-name: stretchLeft;
\r
998 -webkit-animation-name: stretchLeft;
\r
1000 animation-duration: 1.5s;
\r
1001 -webkit-animation-duration: 1.5s;
\r
1003 animation-timing-function: ease-out;
\r
1004 -webkit-animation-timing-function: ease-out;
\r
1006 transform-origin: 100% 0%;
\r
1007 -ms-transform-origin: 100% 0%;
\r
1008 -webkit-transform-origin: 100% 0%;
\r
1011 @keyframes stretchLeft {
\r
1013 transform: scaleX(0.3);
\r
1016 transform: scaleX(1.02);
\r
1019 transform: scaleX(0.98);
\r
1022 transform: scaleX(1.01);
\r
1025 transform: scaleX(0.98);
\r
1028 transform: scaleX(1.01);
\r
1031 transform: scaleX(1);
\r
1035 @-webkit-keyframes stretchLeft {
\r
1037 -webkit-transform: scaleX(0.3);
\r
1040 -webkit-transform: scaleX(1.02);
\r
1043 -webkit-transform: scaleX(0.98);
\r
1046 -webkit-transform: scaleX(1.01);
\r
1049 -webkit-transform: scaleX(0.98);
\r
1052 -webkit-transform: scaleX(1.01);
\r
1055 -webkit-transform: scaleX(1);
\r
1060 ==============================================
\r
1062 ==============================================
\r
1066 animation-name: stretchRight;
\r
1067 -webkit-animation-name: stretchRight;
\r
1069 animation-duration: 1.5s;
\r
1070 -webkit-animation-duration: 1.5s;
\r
1072 animation-timing-function: ease-out;
\r
1073 -webkit-animation-timing-function: ease-out;
\r
1075 transform-origin: 0% 0%;
\r
1076 -ms-transform-origin: 0% 0%;
\r
1077 -webkit-transform-origin: 0% 0%;
\r
1080 @keyframes stretchRight {
\r
1082 transform: scaleX(0.3);
\r
1085 transform: scaleX(1.02);
\r
1088 transform: scaleX(0.98);
\r
1091 transform: scaleX(1.01);
\r
1094 transform: scaleX(0.98);
\r
1097 transform: scaleX(1.01);
\r
1100 transform: scaleX(1);
\r
1104 @-webkit-keyframes stretchRight {
\r
1106 -webkit-transform: scaleX(0.3);
\r
1109 -webkit-transform: scaleX(1.02);
\r
1112 -webkit-transform: scaleX(0.98);
\r
1115 -webkit-transform: scaleX(1.01);
\r
1118 -webkit-transform: scaleX(0.98);
\r
1121 -webkit-transform: scaleX(1.01);
\r
1124 -webkit-transform: scaleX(1);
\r