diff --git a/assets/animate.css b/assets/animate.css index 274c303..0ec4f36 100644 --- a/assets/animate.css +++ b/assets/animate.css @@ -25,7 +25,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ animation-fill-mode: both; } -.animated.hinge { +.animated.hingeOut { -webkit-animation-duration: 2s; -moz-animation-duration: 2s; -o-animation-duration: 2s; @@ -33,22 +33,22 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ } @-webkit-keyframes flash { - 0%, 50%, 100% {opacity: 1;} + 0%, 50%, 100% {opacity: 1;} 25%, 75% {opacity: 0;} } @-moz-keyframes flash { - 0%, 50%, 100% {opacity: 1;} + 0%, 50%, 100% {opacity: 1;} 25%, 75% {opacity: 0;} } @-o-keyframes flash { - 0%, 50%, 100% {opacity: 1;} + 0%, 50%, 100% {opacity: 1;} 25%, 75% {opacity: 0;} } @keyframes flash { - 0%, 50%, 100% {opacity: 1;} + 0%, 50%, 100% {opacity: 1;} 25%, 75% {opacity: 0;} } @@ -118,7 +118,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ animation-name: bounce; } @-webkit-keyframes tada { - 0% {-webkit-transform: scale(1);} + 0% {-webkit-transform: scale(1);} 10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);} 30%, 50%, 70%, 90% {-webkit-transform: scale(1.1) rotate(3deg);} 40%, 60%, 80% {-webkit-transform: scale(1.1) rotate(-3deg);} @@ -126,7 +126,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ } @-moz-keyframes tada { - 0% {-moz-transform: scale(1);} + 0% {-moz-transform: scale(1);} 10%, 20% {-moz-transform: scale(0.9) rotate(-3deg);} 30%, 50%, 70%, 90% {-moz-transform: scale(1.1) rotate(3deg);} 40%, 60%, 80% {-moz-transform: scale(1.1) rotate(-3deg);} @@ -134,7 +134,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ } @-o-keyframes tada { - 0% {-o-transform: scale(1);} + 0% {-o-transform: scale(1);} 10%, 20% {-o-transform: scale(0.9) rotate(-3deg);} 30%, 50%, 70%, 90% {-o-transform: scale(1.1) rotate(3deg);} 40%, 60%, 80% {-o-transform: scale(1.1) rotate(-3deg);} @@ -142,7 +142,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ } @keyframes tada { - 0% {transform: scale(1);} + 0% {transform: scale(1);} 10%, 20% {transform: scale(0.9) rotate(-3deg);} 30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);} 40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);} @@ -157,34 +157,34 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ } @-webkit-keyframes swing { 20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; } - 20% { -webkit-transform: rotate(15deg); } + 20% { -webkit-transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); } - 60% { -webkit-transform: rotate(5deg); } - 80% { -webkit-transform: rotate(-5deg); } + 60% { -webkit-transform: rotate(5deg); } + 80% { -webkit-transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); } } @-moz-keyframes swing { - 20% { -moz-transform: rotate(15deg); } + 20% { -moz-transform: rotate(15deg); } 40% { -moz-transform: rotate(-10deg); } - 60% { -moz-transform: rotate(5deg); } - 80% { -moz-transform: rotate(-5deg); } + 60% { -moz-transform: rotate(5deg); } + 80% { -moz-transform: rotate(-5deg); } 100% { -moz-transform: rotate(0deg); } } @-o-keyframes swing { - 20% { -o-transform: rotate(15deg); } + 20% { -o-transform: rotate(15deg); } 40% { -o-transform: rotate(-10deg); } - 60% { -o-transform: rotate(5deg); } - 80% { -o-transform: rotate(-5deg); } + 60% { -o-transform: rotate(5deg); } + 80% { -o-transform: rotate(-5deg); } 100% { -o-transform: rotate(0deg); } } @keyframes swing { - 20% { transform: rotate(15deg); } + 20% { transform: rotate(15deg); } 40% { transform: rotate(-10deg); } - 60% { transform: rotate(5deg); } - 80% { transform: rotate(-5deg); } + 60% { transform: rotate(5deg); } + 80% { transform: rotate(-5deg); } 100% { transform: rotate(0deg); } } @@ -249,22 +249,22 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes pulse { - 0% { -webkit-transform: scale(1); } + 0% { -webkit-transform: scale(1); } 50% { -webkit-transform: scale(1.1); } 100% { -webkit-transform: scale(1); } } @-moz-keyframes pulse { - 0% { -moz-transform: scale(1); } + 0% { -moz-transform: scale(1); } 50% { -moz-transform: scale(1.1); } 100% { -moz-transform: scale(1); } } @-o-keyframes pulse { - 0% { -o-transform: scale(1); } + 0% { -o-transform: scale(1); } 50% { -o-transform: scale(1.1); } 100% { -o-transform: scale(1); } } @keyframes pulse { - 0% { transform: scale(1); } + 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } @@ -379,15 +379,15 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ -webkit-transform: perspective(400px) rotateX(90deg); opacity: 0; } - + 40% { -webkit-transform: perspective(400px) rotateX(-10deg); } - + 70% { -webkit-transform: perspective(400px) rotateX(10deg); } - + 100% { -webkit-transform: perspective(400px) rotateX(0deg); opacity: 1; @@ -398,15 +398,15 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ -moz-transform: perspective(400px) rotateX(90deg); opacity: 0; } - + 40% { -moz-transform: perspective(400px) rotateX(-10deg); } - + 70% { -moz-transform: perspective(400px) rotateX(10deg); } - + 100% { -moz-transform: perspective(400px) rotateX(0deg); opacity: 1; @@ -417,15 +417,15 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ -o-transform: perspective(400px) rotateX(90deg); opacity: 0; } - + 40% { -o-transform: perspective(400px) rotateX(-10deg); } - + 70% { -o-transform: perspective(400px) rotateX(10deg); } - + 100% { -o-transform: perspective(400px) rotateX(0deg); opacity: 1; @@ -436,15 +436,15 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ transform: perspective(400px) rotateX(90deg); opacity: 0; } - + 40% { transform: perspective(400px) rotateX(-10deg); } - + 70% { transform: perspective(400px) rotateX(10deg); } - + 100% { transform: perspective(400px) rotateX(0deg); opacity: 1; @@ -520,15 +520,15 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ -webkit-transform: perspective(400px) rotateY(90deg); opacity: 0; } - + 40% { -webkit-transform: perspective(400px) rotateY(-10deg); } - + 70% { -webkit-transform: perspective(400px) rotateY(10deg); } - + 100% { -webkit-transform: perspective(400px) rotateY(0deg); opacity: 1; @@ -539,15 +539,15 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ -moz-transform: perspective(400px) rotateY(90deg); opacity: 0; } - + 40% { -moz-transform: perspective(400px) rotateY(-10deg); } - + 70% { -moz-transform: perspective(400px) rotateY(10deg); } - + 100% { -moz-transform: perspective(400px) rotateY(0deg); opacity: 1; @@ -558,15 +558,15 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ -o-transform: perspective(400px) rotateY(90deg); opacity: 0; } - + 40% { -o-transform: perspective(400px) rotateY(-10deg); } - + 70% { -o-transform: perspective(400px) rotateY(10deg); } - + 100% { -o-transform: perspective(400px) rotateY(0deg); opacity: 1; @@ -577,15 +577,15 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ transform: perspective(400px) rotateY(90deg); opacity: 0; } - + 40% { transform: perspective(400px) rotateY(-10deg); } - + 70% { transform: perspective(400px) rotateY(10deg); } - + 100% { transform: perspective(400px) rotateY(0deg); opacity: 1; @@ -654,22 +654,22 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ animation-name: flipOutY; } @-webkit-keyframes fadeIn { - 0% {opacity: 0;} + 0% {opacity: 0;} 100% {opacity: 1;} } @-moz-keyframes fadeIn { - 0% {opacity: 0;} + 0% {opacity: 0;} 100% {opacity: 1;} } @-o-keyframes fadeIn { - 0% {opacity: 0;} + 0% {opacity: 0;} 100% {opacity: 1;} } @keyframes fadeIn { - 0% {opacity: 0;} + 0% {opacity: 0;} 100% {opacity: 1;} } @@ -684,7 +684,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 0; -webkit-transform: translateY(20px); } - + 100% { opacity: 1; -webkit-transform: translateY(0); @@ -696,7 +696,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 0; -moz-transform: translateY(20px); } - + 100% { opacity: 1; -moz-transform: translateY(0); @@ -708,7 +708,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 0; -o-transform: translateY(20px); } - + 100% { opacity: 1; -o-transform: translateY(0); @@ -720,7 +720,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 0; transform: translateY(20px); } - + 100% { opacity: 1; transform: translateY(0); @@ -738,7 +738,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 0; -webkit-transform: translateY(-20px); } - + 100% { opacity: 1; -webkit-transform: translateY(0); @@ -750,7 +750,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 0; -moz-transform: translateY(-20px); } - + 100% { opacity: 1; -moz-transform: translateY(0); @@ -762,7 +762,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 0; -o-transform: translateY(-20px); } - + 100% { opacity: 1; -o-transform: translateY(0); @@ -774,7 +774,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 0; transform: translateY(-20px); } - + 100% { opacity: 1; transform: translateY(0); @@ -792,7 +792,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 0; -webkit-transform: translateX(-20px); } - + 100% { opacity: 1; -webkit-transform: translateX(0); @@ -804,7 +804,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 0; -moz-transform: translateX(-20px); } - + 100% { opacity: 1; -moz-transform: translateX(0); @@ -816,7 +816,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 0; -o-transform: translateX(-20px); } - + 100% { opacity: 1; -o-transform: translateX(0); @@ -828,7 +828,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 0; transform: translateX(-20px); } - + 100% { opacity: 1; transform: translateX(0); @@ -846,7 +846,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 0; -webkit-transform: translateX(20px); } - + 100% { opacity: 1; -webkit-transform: translateX(0); @@ -858,7 +858,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 0; -moz-transform: translateX(20px); } - + 100% { opacity: 1; -moz-transform: translateX(0); @@ -870,7 +870,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 0; -o-transform: translateX(20px); } - + 100% { opacity: 1; -o-transform: translateX(0); @@ -882,7 +882,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 0; transform: translateX(20px); } - + 100% { opacity: 1; transform: translateX(0); @@ -900,7 +900,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 0; -webkit-transform: translateY(2000px); } - + 100% { opacity: 1; -webkit-transform: translateY(0); @@ -912,7 +912,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 0; -moz-transform: translateY(2000px); } - + 100% { opacity: 1; -moz-transform: translateY(0); @@ -924,7 +924,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 0; -o-transform: translateY(2000px); } - + 100% { opacity: 1; -o-transform: translateY(0); @@ -936,7 +936,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 0; transform: translateY(2000px); } - + 100% { opacity: 1; transform: translateY(0); @@ -954,7 +954,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 0; -webkit-transform: translateY(-2000px); } - + 100% { opacity: 1; -webkit-transform: translateY(0); @@ -966,7 +966,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 0; -moz-transform: translateY(-2000px); } - + 100% { opacity: 1; -moz-transform: translateY(0); @@ -978,7 +978,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 0; -o-transform: translateY(-2000px); } - + 100% { opacity: 1; -o-transform: translateY(0); @@ -990,7 +990,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 0; transform: translateY(-2000px); } - + 100% { opacity: 1; transform: translateY(0); @@ -1008,7 +1008,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 0; -webkit-transform: translateX(-2000px); } - + 100% { opacity: 1; -webkit-transform: translateX(0); @@ -1019,7 +1019,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 0; -moz-transform: translateX(-2000px); } - + 100% { opacity: 1; -moz-transform: translateX(0); @@ -1030,7 +1030,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 0; -o-transform: translateX(-2000px); } - + 100% { opacity: 1; -o-transform: translateX(0); @@ -1041,7 +1041,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 0; transform: translateX(-2000px); } - + 100% { opacity: 1; transform: translateX(0); @@ -1059,7 +1059,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 0; -webkit-transform: translateX(2000px); } - + 100% { opacity: 1; -webkit-transform: translateX(0); @@ -1071,7 +1071,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 0; -moz-transform: translateX(2000px); } - + 100% { opacity: 1; -moz-transform: translateX(0); @@ -1083,7 +1083,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 0; -o-transform: translateX(2000px); } - + 100% { opacity: 1; -o-transform: translateX(0); @@ -1095,7 +1095,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 0; transform: translateX(2000px); } - + 100% { opacity: 1; transform: translateX(0); @@ -1139,7 +1139,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 1; -webkit-transform: translateY(0); } - + 100% { opacity: 0; -webkit-transform: translateY(-20px); @@ -1150,7 +1150,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 1; -moz-transform: translateY(0); } - + 100% { opacity: 0; -moz-transform: translateY(-20px); @@ -1161,7 +1161,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 1; -o-transform: translateY(0); } - + 100% { opacity: 0; -o-transform: translateY(-20px); @@ -1172,7 +1172,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 1; transform: translateY(0); } - + 100% { opacity: 0; transform: translateY(-20px); @@ -1190,7 +1190,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 1; -webkit-transform: translateY(0); } - + 100% { opacity: 0; -webkit-transform: translateY(20px); @@ -1202,7 +1202,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 1; -moz-transform: translateY(0); } - + 100% { opacity: 0; -moz-transform: translateY(20px); @@ -1214,7 +1214,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 1; -o-transform: translateY(0); } - + 100% { opacity: 0; -o-transform: translateY(20px); @@ -1226,7 +1226,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 1; transform: translateY(0); } - + 100% { opacity: 0; transform: translateY(20px); @@ -1244,7 +1244,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 1; -webkit-transform: translateX(0); } - + 100% { opacity: 0; -webkit-transform: translateX(-20px); @@ -1256,7 +1256,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 1; -moz-transform: translateX(0); } - + 100% { opacity: 0; -moz-transform: translateX(-20px); @@ -1268,7 +1268,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 1; -o-transform: translateX(0); } - + 100% { opacity: 0; -o-transform: translateX(-20px); @@ -1280,7 +1280,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 1; transform: translateX(0); } - + 100% { opacity: 0; transform: translateX(-20px); @@ -1298,7 +1298,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 1; -webkit-transform: translateX(0); } - + 100% { opacity: 0; -webkit-transform: translateX(20px); @@ -1310,7 +1310,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 1; -moz-transform: translateX(0); } - + 100% { opacity: 0; -moz-transform: translateX(20px); @@ -1322,7 +1322,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 1; -o-transform: translateX(0); } - + 100% { opacity: 0; -o-transform: translateX(20px); @@ -1334,7 +1334,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 1; transform: translateX(0); } - + 100% { opacity: 0; transform: translateX(20px); @@ -1352,7 +1352,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 1; -webkit-transform: translateY(0); } - + 100% { opacity: 0; -webkit-transform: translateY(-2000px); @@ -1364,7 +1364,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 1; -moz-transform: translateY(0); } - + 100% { opacity: 0; -moz-transform: translateY(-2000px); @@ -1376,7 +1376,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 1; -o-transform: translateY(0); } - + 100% { opacity: 0; -o-transform: translateY(-2000px); @@ -1388,7 +1388,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 1; transform: translateY(0); } - + 100% { opacity: 0; transform: translateY(-2000px); @@ -1406,7 +1406,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 1; -webkit-transform: translateY(0); } - + 100% { opacity: 0; -webkit-transform: translateY(2000px); @@ -1418,7 +1418,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 1; -moz-transform: translateY(0); } - + 100% { opacity: 0; -moz-transform: translateY(2000px); @@ -1430,7 +1430,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 1; -o-transform: translateY(0); } - + 100% { opacity: 0; -o-transform: translateY(2000px); @@ -1442,7 +1442,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 1; transform: translateY(0); } - + 100% { opacity: 0; transform: translateY(2000px); @@ -1460,7 +1460,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 1; -webkit-transform: translateX(0); } - + 100% { opacity: 0; -webkit-transform: translateX(-2000px); @@ -1472,7 +1472,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 1; -moz-transform: translateX(0); } - + 100% { opacity: 0; -moz-transform: translateX(-2000px); @@ -1484,7 +1484,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 1; -o-transform: translateX(0); } - + 100% { opacity: 0; -o-transform: translateX(-2000px); @@ -1496,7 +1496,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 1; transform: translateX(0); } - + 100% { opacity: 0; transform: translateX(-2000px); @@ -1514,7 +1514,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 1; -webkit-transform: translateX(0); } - + 100% { opacity: 0; -webkit-transform: translateX(2000px); @@ -1525,7 +1525,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 1; -moz-transform: translateX(0); } - + 100% { opacity: 0; -moz-transform: translateX(2000px); @@ -1536,7 +1536,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 1; -o-transform: translateX(0); } - + 100% { opacity: 0; -o-transform: translateX(2000px); @@ -1547,7 +1547,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 1; transform: translateX(0); } - + 100% { opacity: 0; transform: translateX(2000px); @@ -1565,16 +1565,16 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 0; -webkit-transform: scale(.3); } - + 50% { opacity: 1; -webkit-transform: scale(1.05); } - + 70% { -webkit-transform: scale(.9); } - + 100% { -webkit-transform: scale(1); } @@ -1585,16 +1585,16 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 0; -moz-transform: scale(.3); } - + 50% { opacity: 1; -moz-transform: scale(1.05); } - + 70% { -moz-transform: scale(.9); } - + 100% { -moz-transform: scale(1); } @@ -1605,16 +1605,16 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 0; -o-transform: scale(.3); } - + 50% { opacity: 1; -o-transform: scale(1.05); } - + 70% { -o-transform: scale(.9); } - + 100% { -o-transform: scale(1); } @@ -1625,16 +1625,16 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 0; transform: scale(.3); } - + 50% { opacity: 1; transform: scale(1.05); } - + 70% { transform: scale(.9); } - + 100% { transform: scale(1); } @@ -1651,16 +1651,16 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 0; -webkit-transform: translateY(2000px); } - + 60% { opacity: 1; -webkit-transform: translateY(-30px); } - + 80% { -webkit-transform: translateY(10px); } - + 100% { -webkit-transform: translateY(0); } @@ -1670,16 +1670,16 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 0; -moz-transform: translateY(2000px); } - + 60% { opacity: 1; -moz-transform: translateY(-30px); } - + 80% { -moz-transform: translateY(10px); } - + 100% { -moz-transform: translateY(0); } @@ -1690,16 +1690,16 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 0; -o-transform: translateY(2000px); } - + 60% { opacity: 1; -o-transform: translateY(-30px); } - + 80% { -o-transform: translateY(10px); } - + 100% { -o-transform: translateY(0); } @@ -1710,16 +1710,16 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 0; transform: translateY(2000px); } - + 60% { opacity: 1; transform: translateY(-30px); } - + 80% { transform: translateY(10px); } - + 100% { transform: translateY(0); } @@ -1736,16 +1736,16 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 0; -webkit-transform: translateY(-2000px); } - + 60% { opacity: 1; -webkit-transform: translateY(30px); } - + 80% { -webkit-transform: translateY(-10px); } - + 100% { -webkit-transform: translateY(0); } @@ -1756,16 +1756,16 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 0; -moz-transform: translateY(-2000px); } - + 60% { opacity: 1; -moz-transform: translateY(30px); } - + 80% { -moz-transform: translateY(-10px); } - + 100% { -moz-transform: translateY(0); } @@ -1776,16 +1776,16 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 0; -o-transform: translateY(-2000px); } - + 60% { opacity: 1; -o-transform: translateY(30px); } - + 80% { -o-transform: translateY(-10px); } - + 100% { -o-transform: translateY(0); } @@ -1796,16 +1796,16 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 0; transform: translateY(-2000px); } - + 60% { opacity: 1; transform: translateY(30px); } - + 80% { transform: translateY(-10px); } - + 100% { transform: translateY(0); } @@ -1822,16 +1822,16 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 0; -webkit-transform: translateX(-2000px); } - + 60% { opacity: 1; -webkit-transform: translateX(30px); } - + 80% { -webkit-transform: translateX(-10px); } - + 100% { -webkit-transform: translateX(0); } @@ -1842,16 +1842,16 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 0; -moz-transform: translateX(-2000px); } - + 60% { opacity: 1; -moz-transform: translateX(30px); } - + 80% { -moz-transform: translateX(-10px); } - + 100% { -moz-transform: translateX(0); } @@ -1862,16 +1862,16 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 0; -o-transform: translateX(-2000px); } - + 60% { opacity: 1; -o-transform: translateX(30px); } - + 80% { -o-transform: translateX(-10px); } - + 100% { -o-transform: translateX(0); } @@ -1882,16 +1882,16 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 0; transform: translateX(-2000px); } - + 60% { opacity: 1; transform: translateX(30px); } - + 80% { transform: translateX(-10px); } - + 100% { transform: translateX(0); } @@ -1908,16 +1908,16 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 0; -webkit-transform: translateX(2000px); } - + 60% { opacity: 1; -webkit-transform: translateX(-30px); } - + 80% { -webkit-transform: translateX(10px); } - + 100% { -webkit-transform: translateX(0); } @@ -1928,16 +1928,16 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 0; -moz-transform: translateX(2000px); } - + 60% { opacity: 1; -moz-transform: translateX(-30px); } - + 80% { -moz-transform: translateX(10px); } - + 100% { -moz-transform: translateX(0); } @@ -1948,16 +1948,16 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 0; -o-transform: translateX(2000px); } - + 60% { opacity: 1; -o-transform: translateX(-30px); } - + 80% { -o-transform: translateX(10px); } - + 100% { -o-transform: translateX(0); } @@ -1968,16 +1968,16 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ opacity: 0; transform: translateX(2000px); } - + 60% { opacity: 1; transform: translateX(-30px); } - + 80% { transform: translateX(10px); } - + 100% { transform: translateX(0); } @@ -1993,80 +1993,80 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ 0% { -webkit-transform: scale(1); } - + 25% { -webkit-transform: scale(.95); } - + 50% { opacity: 1; -webkit-transform: scale(1.1); } - + 100% { opacity: 0; -webkit-transform: scale(.3); - } + } } @-moz-keyframes bounceOut { 0% { -moz-transform: scale(1); } - + 25% { -moz-transform: scale(.95); } - + 50% { opacity: 1; -moz-transform: scale(1.1); } - + 100% { opacity: 0; -moz-transform: scale(.3); - } + } } @-o-keyframes bounceOut { 0% { -o-transform: scale(1); } - + 25% { -o-transform: scale(.95); } - + 50% { opacity: 1; -o-transform: scale(1.1); } - + 100% { opacity: 0; -o-transform: scale(.3); - } + } } @keyframes bounceOut { 0% { transform: scale(1); } - + 25% { transform: scale(.95); } - + 50% { opacity: 1; transform: scale(1.1); } - + 100% { opacity: 0; transform: scale(.3); - } + } } .bounceOut { @@ -2079,12 +2079,12 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ 0% { -webkit-transform: translateY(0); } - + 20% { opacity: 1; -webkit-transform: translateY(20px); } - + 100% { opacity: 0; -webkit-transform: translateY(-2000px); @@ -2095,12 +2095,12 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ 0% { -moz-transform: translateY(0); } - + 20% { opacity: 1; -moz-transform: translateY(20px); } - + 100% { opacity: 0; -moz-transform: translateY(-2000px); @@ -2111,12 +2111,12 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ 0% { -o-transform: translateY(0); } - + 20% { opacity: 1; -o-transform: translateY(20px); } - + 100% { opacity: 0; -o-transform: translateY(-2000px); @@ -2127,12 +2127,12 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ 0% { transform: translateY(0); } - + 20% { opacity: 1; transform: translateY(20px); } - + 100% { opacity: 0; transform: translateY(-2000px); @@ -2149,12 +2149,12 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ 0% { -webkit-transform: translateY(0); } - + 20% { opacity: 1; -webkit-transform: translateY(-20px); } - + 100% { opacity: 0; -webkit-transform: translateY(2000px); @@ -2165,12 +2165,12 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ 0% { -moz-transform: translateY(0); } - + 20% { opacity: 1; -moz-transform: translateY(-20px); } - + 100% { opacity: 0; -moz-transform: translateY(2000px); @@ -2181,12 +2181,12 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ 0% { -o-transform: translateY(0); } - + 20% { opacity: 1; -o-transform: translateY(-20px); } - + 100% { opacity: 0; -o-transform: translateY(2000px); @@ -2197,12 +2197,12 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ 0% { transform: translateY(0); } - + 20% { opacity: 1; transform: translateY(-20px); } - + 100% { opacity: 0; transform: translateY(2000px); @@ -2219,12 +2219,12 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ 0% { -webkit-transform: translateX(0); } - + 20% { opacity: 1; -webkit-transform: translateX(20px); } - + 100% { opacity: 0; -webkit-transform: translateX(-2000px); @@ -2235,12 +2235,12 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ 0% { -moz-transform: translateX(0); } - + 20% { opacity: 1; -moz-transform: translateX(20px); } - + 100% { opacity: 0; -moz-transform: translateX(-2000px); @@ -2251,12 +2251,12 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ 0% { -o-transform: translateX(0); } - + 20% { opacity: 1; -o-transform: translateX(20px); } - + 100% { opacity: 0; -o-transform: translateX(-2000px); @@ -2267,12 +2267,12 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ 0% { transform: translateX(0); } - + 20% { opacity: 1; transform: translateX(20px); } - + 100% { opacity: 0; transform: translateX(-2000px); @@ -2289,12 +2289,12 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ 0% { -webkit-transform: translateX(0); } - + 20% { opacity: 1; -webkit-transform: translateX(-20px); } - + 100% { opacity: 0; -webkit-transform: translateX(2000px); @@ -2305,12 +2305,12 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ 0% { -moz-transform: translateX(0); } - + 20% { opacity: 1; -moz-transform: translateX(-20px); } - + 100% { opacity: 0; -moz-transform: translateX(2000px); @@ -2321,12 +2321,12 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ 0% { -o-transform: translateX(0); } - + 20% { opacity: 1; -o-transform: translateX(-20px); } - + 100% { opacity: 0; -o-transform: translateX(2000px); @@ -2337,12 +2337,12 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ 0% { transform: translateX(0); } - + 20% { opacity: 1; transform: translateX(-20px); } - + 100% { opacity: 0; transform: translateX(2000px); @@ -2361,7 +2361,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ -webkit-transform: rotate(-200deg); opacity: 0; } - + 100% { -webkit-transform-origin: center center; -webkit-transform: rotate(0); @@ -2374,7 +2374,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ -moz-transform: rotate(-200deg); opacity: 0; } - + 100% { -moz-transform-origin: center center; -moz-transform: rotate(0); @@ -2387,7 +2387,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ -o-transform: rotate(-200deg); opacity: 0; } - + 100% { -o-transform-origin: center center; -o-transform: rotate(0); @@ -2400,7 +2400,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ transform: rotate(-200deg); opacity: 0; } - + 100% { transform-origin: center center; transform: rotate(0); @@ -2420,7 +2420,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ -webkit-transform: rotate(90deg); opacity: 0; } - + 100% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(0); @@ -2434,7 +2434,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ -moz-transform: rotate(90deg); opacity: 0; } - + 100% { -moz-transform-origin: left bottom; -moz-transform: rotate(0); @@ -2448,7 +2448,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ -o-transform: rotate(90deg); opacity: 0; } - + 100% { -o-transform-origin: left bottom; -o-transform: rotate(0); @@ -2462,7 +2462,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ transform: rotate(90deg); opacity: 0; } - + 100% { transform-origin: left bottom; transform: rotate(0); @@ -2482,7 +2482,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ -webkit-transform: rotate(-90deg); opacity: 0; } - + 100% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(0); @@ -2496,7 +2496,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ -moz-transform: rotate(-90deg); opacity: 0; } - + 100% { -moz-transform-origin: left bottom; -moz-transform: rotate(0); @@ -2510,7 +2510,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ -o-transform: rotate(-90deg); opacity: 0; } - + 100% { -o-transform-origin: left bottom; -o-transform: rotate(0); @@ -2524,7 +2524,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ transform: rotate(-90deg); opacity: 0; } - + 100% { transform-origin: left bottom; transform: rotate(0); @@ -2544,7 +2544,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ -webkit-transform: rotate(-90deg); opacity: 0; } - + 100% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(0); @@ -2558,7 +2558,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ -moz-transform: rotate(-90deg); opacity: 0; } - + 100% { -moz-transform-origin: right bottom; -moz-transform: rotate(0); @@ -2572,7 +2572,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ -o-transform: rotate(-90deg); opacity: 0; } - + 100% { -o-transform-origin: right bottom; -o-transform: rotate(0); @@ -2586,7 +2586,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ transform: rotate(-90deg); opacity: 0; } - + 100% { transform-origin: right bottom; transform: rotate(0); @@ -2606,7 +2606,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ -webkit-transform: rotate(90deg); opacity: 0; } - + 100% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(0); @@ -2620,7 +2620,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ -moz-transform: rotate(90deg); opacity: 0; } - + 100% { -moz-transform-origin: right bottom; -moz-transform: rotate(0); @@ -2634,7 +2634,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ -o-transform: rotate(90deg); opacity: 0; } - + 100% { -o-transform-origin: right bottom; -o-transform: rotate(0); @@ -2648,7 +2648,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ transform: rotate(90deg); opacity: 0; } - + 100% { transform-origin: right bottom; transform: rotate(0); @@ -2668,7 +2668,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ -webkit-transform: rotate(0); opacity: 1; } - + 100% { -webkit-transform-origin: center center; -webkit-transform: rotate(200deg); @@ -2682,7 +2682,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ -moz-transform: rotate(0); opacity: 1; } - + 100% { -moz-transform-origin: center center; -moz-transform: rotate(200deg); @@ -2696,7 +2696,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ -o-transform: rotate(0); opacity: 1; } - + 100% { -o-transform-origin: center center; -o-transform: rotate(200deg); @@ -2710,7 +2710,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ transform: rotate(0); opacity: 1; } - + 100% { transform-origin: center center; transform: rotate(200deg); @@ -2730,7 +2730,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ -webkit-transform: rotate(0); opacity: 1; } - + 100% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(-90deg); @@ -2744,7 +2744,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ -moz-transform: rotate(0); opacity: 1; } - + 100% { -moz-transform-origin: left bottom; -moz-transform: rotate(-90deg); @@ -2758,7 +2758,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ -o-transform: rotate(0); opacity: 1; } - + 100% { -o-transform-origin: left bottom; -o-transform: rotate(-90deg); @@ -2772,7 +2772,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ transform: rotate(0); opacity: 1; } - + 100% { transform-origin: left bottom; transform: rotate(-90deg); @@ -2792,7 +2792,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ -webkit-transform: rotate(0); opacity: 1; } - + 100% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(90deg); @@ -2806,7 +2806,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ -moz-transform: rotate(0); opacity: 1; } - + 100% { -moz-transform-origin: left bottom; -moz-transform: rotate(90deg); @@ -2820,7 +2820,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ -o-transform: rotate(0); opacity: 1; } - + 100% { -o-transform-origin: left bottom; -o-transform: rotate(90deg); @@ -2834,7 +2834,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ transform: rotate(0); opacity: 1; } - + 100% { transform-origin: left bottom; transform: rotate(90deg); @@ -2854,7 +2854,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ -webkit-transform: rotate(0); opacity: 1; } - + 100% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(90deg); @@ -2868,7 +2868,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ -moz-transform: rotate(0); opacity: 1; } - + 100% { -moz-transform-origin: right bottom; -moz-transform: rotate(90deg); @@ -2882,7 +2882,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ -o-transform: rotate(0); opacity: 1; } - + 100% { -o-transform-origin: right bottom; -o-transform: rotate(90deg); @@ -2896,7 +2896,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ transform: rotate(0); opacity: 1; } - + 100% { transform-origin: right bottom; transform: rotate(90deg); @@ -2916,7 +2916,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ -webkit-transform: rotate(0); opacity: 1; } - + 100% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(-90deg); @@ -2930,7 +2930,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ -moz-transform: rotate(0); opacity: 1; } - + 100% { -moz-transform-origin: right bottom; -moz-transform: rotate(-90deg); @@ -2944,7 +2944,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ -o-transform: rotate(0); opacity: 1; } - + 100% { -o-transform-origin: right bottom; -o-transform: rotate(-90deg); @@ -2958,7 +2958,7 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ transform: rotate(0); opacity: 1; } - + 100% { transform-origin: right bottom; transform: rotate(-90deg); @@ -2972,43 +2972,43 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ -o-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; } -@-webkit-keyframes hinge { - 0% { -webkit-transform: rotate(0); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } - 20%, 60% { -webkit-transform: rotate(80deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } - 40% { -webkit-transform: rotate(60deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } - 80% { -webkit-transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } +@-webkit-keyframes hingeOut { + 0% { -webkit-transform: rotate(0); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } + 20%, 60% { -webkit-transform: rotate(80deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } + 40% { -webkit-transform: rotate(60deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } + 80% { -webkit-transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } 100% { -webkit-transform: translateY(700px); opacity: 0; } } -@-moz-keyframes hinge { - 0% { -moz-transform: rotate(0); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } - 20%, 60% { -moz-transform: rotate(80deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } - 40% { -moz-transform: rotate(60deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } - 80% { -moz-transform: rotate(60deg) translateY(0); opacity: 1; -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } +@-moz-keyframes hingeOut { + 0% { -moz-transform: rotate(0); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } + 20%, 60% { -moz-transform: rotate(80deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } + 40% { -moz-transform: rotate(60deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } + 80% { -moz-transform: rotate(60deg) translateY(0); opacity: 1; -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } 100% { -moz-transform: translateY(700px); opacity: 0; } } -@-o-keyframes hinge { - 0% { -o-transform: rotate(0); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } - 20%, 60% { -o-transform: rotate(80deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } - 40% { -o-transform: rotate(60deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } - 80% { -o-transform: rotate(60deg) translateY(0); opacity: 1; -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } +@-o-keyframes hingeOut { + 0% { -o-transform: rotate(0); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } + 20%, 60% { -o-transform: rotate(80deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } + 40% { -o-transform: rotate(60deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } + 80% { -o-transform: rotate(60deg) translateY(0); opacity: 1; -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } 100% { -o-transform: translateY(700px); opacity: 0; } } -@keyframes hinge { - 0% { transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out; } - 20%, 60% { transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out; } - 40% { transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out; } - 80% { transform: rotate(60deg) translateY(0); opacity: 1; transform-origin: top left; animation-timing-function: ease-in-out; } +@keyframes hingeOut { + 0% { transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out; } + 20%, 60% { transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out; } + 40% { transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out; } + 80% { transform: rotate(60deg) translateY(0); opacity: 1; transform-origin: top left; animation-timing-function: ease-in-out; } 100% { transform: translateY(700px); opacity: 0; } } -.hinge { - -webkit-animation-name: hinge; - -moz-animation-name: hinge; - -o-animation-name: hinge; - animation-name: hinge; +.hingeOut { + -webkit-animation-name: hingeOut; + -moz-animation-name: hingeOut; + -o-animation-name: hingeOut; + animation-name: hingeOut; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ diff --git a/assets/jquery.lettering.js b/assets/jquery.lettering.js index 4515590..0ad7678 100644 --- a/assets/jquery.lettering.js +++ b/assets/jquery.lettering.js @@ -1,9 +1,9 @@ /*global jQuery */ -/*! +/*! * Lettering.JS 0.6.1 * * Copyright 2010, Dave Rupert http://daverupert.com -* Released under the WTFPL license +* Released under the WTFPL license * http://sam.zoy.org/wtfpl/ * * Thanks to Paul Irish - http://paulirish.com - for the feedback. @@ -11,56 +11,132 @@ * Date: Mon Sep 20 17:14:00 2010 -0600 */ (function($){ - function injector(t, splitter, klass, after) { - var a = t.text().split(splitter), inject = ''; - if (a.length) { - $(a).each(function(i, item) { - inject += ''+item+''+after; - }); - t.empty().append(inject); - } - } - - var methods = { - init : function() { - - return this.each(function() { - injector($(this), '', 'char', ''); - }); - - }, - - words : function() { - - return this.each(function() { - injector($(this), ' ', 'word', ' '); - }); - - }, - - lines : function() { - - return this.each(function() { - var r = "eefec303079ad17405c889e092e105b0"; - // Because it's hard to split a
tag consistently across browsers, - // (*ahem* IE *ahem*), we replaces all
instances with an md5 hash - // (of the word "split"). If you're trying to use this plugin on that - // md5 hash string, it will fail because you're being ridiculous. - injector($(this).children("br").replaceWith(r).end(), r, 'line', ''); - }); - - } - }; - - $.fn.lettering = function( method ) { - // Method calling logic - if ( method && methods[method] ) { - return methods[ method ].apply( this, [].slice.call( arguments, 1 )); - } else if ( method === 'letters' || ! method ) { - return methods.init.apply( this, [].slice.call( arguments, 0 ) ); // always pass an array - } - $.error( 'Method ' + method + ' does not exist on jQuery.lettering' ); - return this; - }; + function injector(t, splitter, klass, after) { + var a = t.text().split(splitter), + inject = ''; + if (a.length) { + $(a).each(function(i, item) { + inject += '' + item + '' + after; + }); + t.empty().append(inject); + } + } + + function tagInjector(t, splitter, klass, after) { + var content = t.contents(), + a, + n, + i = 0, + inject, + tagName, + elClass, + newT, + target; + t.empty(); + if(klass == 'word') { + target = $(content)[0].childNodes; + } else { + target = $(content)[0]; + } + $(target).each(function() { + n = this; + + // if node has class containing 'icon', don't split chars + if($(n).is('[class*="icon"]') && klass == 'char') { + a = [$.trim($(n).text())]; + } else { + a = $.trim($(n).text()).split(splitter); + } + if (a.length) { + if(n.nodeType === 3) { // text + inject = ''; + $(a).each(function(index, item) { + inject += '' + item + '' + after; + i++; + }); + t.append(inject); + } else if(n.nodeType === 1) { // element + tagName = $(n).prop("tagName").toLowerCase(); + if(klass == 'word') { + elClass = ''; + if($(n).attr('class') !== undefined) { + elClass = ' class="' + $.trim($(n).attr('class').replace(/current/, '')) + '"'; + } + $(a).each(function(index, item) { + newT = '<' + tagName + elClass + '>' + item + '' + after; + t.append(newT); + i++; + }); + } else if(klass == 'char') { + $(a).each(function(index, item) { + elClass = ''; + if($(n).attr('class') !== undefined) { + elClass = ' ' + $.trim($(n).attr('class')); + } + inject = '<' + tagName + ' class="' + klass + (i + 1) + elClass + '">' + item + '' + after; + t.append(inject); + i++; + }); + } + } + } + }); + } + + var methods = { + init : function() { + + return this.each(function() { + injector($(this), '', 'char', ''); + }); + + }, + + // Custom function to transmit tag/class (ie : icon) to each character + wordsWithTags : function() { + return this.each(function() { + tagInjector($(this), ' ', 'word', ' '); + }); + }, + + lettersWithTags : function() { + return this.each(function() { + tagInjector($(this), '', 'char', ''); + }); + + }, + + words : function() { + + return this.each(function() { + injector($(this), ' ', 'word', ' '); + }); + + }, + + lines : function() { + + return this.each(function() { + var r = "eefec303079ad17405c889e092e105b0"; + // Because it's hard to split a
tag consistently across browsers, + // (*ahem* IE *ahem*), we replaces all
instances with an md5 hash + // (of the word "split"). If you're trying to use this plugin on that + // md5 hash string, it will fail because you're being ridiculous. + injector($(this).children("br").replaceWith(r).end(), r, 'line', ''); + }); + + } + }; + + $.fn.lettering = function( method ) { + // Method calling logic + if ( method && methods[method] ) { + return methods[ method ].apply( this, [].slice.call( arguments, 1 )); + } else if ( method === 'letters' || ! method ) { + return methods.init.apply( this, [].slice.call( arguments, 0 ) ); // always pass an array + } + $.error( 'Method ' + method + ' does not exist on jQuery.lettering' ); + return this; + }; })(jQuery); \ No newline at end of file diff --git a/assets/style.css b/assets/style.css index 5f46766..3902ddf 100644 --- a/assets/style.css +++ b/assets/style.css @@ -244,6 +244,25 @@ a:hover { /*visibility: hidden;*/ } +.playground .viewport .tlt [class"^=char"] { + visibility: hidden; +} + +.playground .evil { + color: #f44336; + font-size: 36px; + text-shadow: 1px 2px 0 #3D0909; +} + +.playground .trending-up { + color:#c62828; + font-size: 60px; + position: relative; + top: 16px; + margin-right: -7px; + text-shadow: 1px 2px 0 #3D0909; +} + .deps { font-size: 1.2em; } diff --git a/index.html b/index.html index 2cd55e1..a6ee6ad 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,7 @@ +
@@ -19,26 +20,26 @@

textillate.js

Download on Github
- Tweet    - -
@@ -76,8 +77,8 @@

Playground

@@ -141,18 +142,18 @@

Dependencies

$this.text($this.html()); }) - var animateClasses = 'flash bounce shake tada swing wobble pulse flip flipInX flipOutX flipInY flipOutY fadeIn fadeInUp fadeInDown fadeInLeft fadeInRight fadeInUpBig fadeInDownBig fadeInLeftBig fadeInRightBig fadeOut fadeOutUp fadeOutDown fadeOutLeft fadeOutRight fadeOutUpBig fadeOutDownBig fadeOutLeftBig fadeOutRightBig bounceIn bounceInDown bounceInUp bounceInLeft bounceInRight bounceOut bounceOutDown bounceOutUp bounceOutLeft bounceOutRight rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft rotateInUpRight rotateOut rotateOutDownLeft rotateOutDownRight rotateOutUpLeft rotateOutUpRight hinge rollIn rollOut'; + var animateClasses = 'flash bounce shake tada swing wobble pulse flip flipInX flipOutX flipInY flipOutY fadeIn fadeInUp fadeInDown fadeInLeft fadeInRight fadeInUpBig fadeInDownBig fadeInLeftBig fadeInRightBig fadeOut fadeOutUp fadeOutDown fadeOutLeft fadeOutRight fadeOutUpBig fadeOutDownBig fadeOutLeftBig fadeOutRightBig bounceIn bounceInDown bounceInUp bounceInLeft bounceInRight bounceOut bounceOutDown bounceOutUp bounceOutLeft bounceOutRight rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft rotateInUpRight rotateOut rotateOutDownLeft rotateOutDownRight rotateOutUpLeft rotateOutUpRight hingeOut rollIn rollOut'; var $form = $('.playground form') , $viewport = $('.playground .viewport'); var getFormData = function () { - var data = { - loop: true, - in: { callback: log('in callback called.') }, + var data = { + loop: true, + in: { callback: log('in callback called.') }, out: { callback: log('out callback called.') } }; - + $form.find('[data-key="effect"]').each(function () { var $this = $(this) , key = $this.data('key') @@ -179,24 +180,24 @@

Dependencies

var type = '[data-type]' , option = ''; - if (/Out/.test(value) || value === 'hinge') { + if (/Out/.test(value)) { type = '[data-type="out"]'; } else if (/In/.test(value)) { type = '[data-type="in"]'; - } + } if (type) { - $form.find('[data-key="effect"]' + type).append(option); + $form.find('[data-key="effect"]' + type).append(option); } }); $form.find('[data-key="effect"][data-type="in"]').val('fadeInLeftBig'); - $form.find('[data-key="effect"][data-type="out"]').val('hinge'); + $form.find('[data-key="effect"][data-type="out"]').val('hingeOut'); $('.jumbotron h1') .fitText(0.5) .textillate({ in: { effect: 'flipInY' }}); - + $('.jumbotron p') .fitText(3.2, { maxFontSize: 18 }) .textillate({ initialDelay: 1000, in: { delay: 3, shuffle: true } }); @@ -216,7 +217,7 @@

Dependencies

.on('outAnimationBegin.tlt', log('outAnimationBegin.tlt triggered.')) .on('outAnimationEnd.tlt', log('outAnimationEnd.tlt triggered.')) .on('end.tlt', log('end.tlt')); - + $form.on('change', function () { var obj = getFormData(); $tlt.textillate(obj); diff --git a/jquery.textillate.js b/jquery.textillate.js index 49b9eb0..6acbb51 100644 --- a/jquery.textillate.js +++ b/jquery.textillate.js @@ -4,6 +4,8 @@ * MIT licensed * * Copyright (C) 2012-2013 Jordan Schroter + * + * Updates for sliderMaker : find - Slidermaker setting - */ (function ($) { @@ -11,22 +13,22 @@ function isInEffect (effect) { return /In/.test(effect) || $.inArray(effect, $.fn.textillate.defaults.inEffects) >= 0; - }; + } function isOutEffect (effect) { return /Out/.test(effect) || $.inArray(effect, $.fn.textillate.defaults.outEffects) >= 0; - }; + } function stringToBoolean(str) { if (str !== "true" && str !== "false") return str; return (str === "true"); - }; + } // custom get data api method function getData (node) { - var attrs = node.attributes || [] - , data = {}; + var attrs = node.attributes || [], + data = {}; if (!attrs.length) return data; @@ -41,7 +43,7 @@ } else if (/^data-*/.test(nodeName)) { data[nodeName.replace(/data-/, '')] = stringToBoolean(attr.nodeValue); } - }) + }); return data; } @@ -63,8 +65,8 @@ } function animateTokens ($tokens, options, cb) { - var that = this - , count = $tokens.length; + var that = this, + count = $tokens.length; if (!count) { cb && cb(); @@ -73,10 +75,8 @@ if (options.shuffle) $tokens = shuffle($tokens); if (options.reverse) $tokens = $tokens.toArray().reverse(); - $.each($tokens, function (i, t) { var $token = $(t); - function complete () { if (isInEffect(options.effect)) { $token.css('visibility', 'visible'); @@ -90,20 +90,18 @@ var delay = options.sync ? options.delay : options.delay * i * options.delayScale; $token.text() ? - setTimeout(function () { animate($token, options.effect, complete) }, delay) : - complete(); + setTimeout(function () { animate($token, options.effect, complete) }, delay) : complete(); }); - }; + } var Textillate = function (element, options) { - var base = this - , $element = $(element); + var base = this, + $element = $(element); base.init = function () { base.$texts = $element.find(options.selector); - if (!base.$texts.length) { - base.$texts = $(''); + base.$texts = $(''); $element.html(base.$texts); } @@ -125,7 +123,7 @@ setTimeout(function () { base.options.autoStart && base.start(); - }, base.options.initialDelay) + }, base.options.initialDelay); }; base.setOptions = function (options) { @@ -140,18 +138,17 @@ base.in = function (index, cb) { index = index || 0; - - var $elem = base.$texts.find(':nth-child(' + ((index||0) + 1) + ')') - , options = $.extend(true, {}, base.options, $elem.length ? getData($elem[0]) : {}) - , $tokens; + var $elem = base.$texts.find('li:nth-child(' + ((index||0) + 1) + ')'), + options = $.extend(true, {}, base.options, $elem.length ? getData($elem[0]) : {}), + $tokens; $elem.addClass('current'); base.triggerEvent('inAnimationBegin'); - base.$current .html($elem.html()) - .lettering('words'); + .lettering('wordsWithTags'); // add tag & class support + // .lettering('words'); // split words to individual characters if token type is set to 'char' if (base.options.type == "char") { @@ -164,7 +161,7 @@ '-o-transform': 'translate3d(0,0,0)', 'transform': 'translate3d(0,0,0)' }) - .each(function () { $(this).lettering() }); + .each(function () { $(this).lettering('lettersWithTags'); }); } $tokens = base.$current @@ -187,10 +184,9 @@ }; base.out = function (cb) { - var $elem = base.$texts.find(':nth-child(' + ((base.currentIndex||0) + 1) + ')') - , $tokens = base.$current.find('[class^="' + base.options.type + '"]') - , options = $.extend(true, {}, base.options, $elem.length ? getData($elem[0]) : {}) - + var $elem = base.$texts.find('li:nth-child(' + ((base.currentIndex||0) + 1) + ')'), + $tokens = base.$current.find('[class^="' + base.options.type + '"]'), + options = $.extend(true, {}, base.options, $elem.length ? getData($elem[0]) : {}); base.triggerEvent('outAnimationBegin'); animateTokens($tokens, options.out, function () { @@ -219,7 +215,7 @@ base.timeoutRun = setTimeout(function () { base.out(function () { - run(index) + run(index); }); }, base.options.minDisplayTime); } @@ -236,13 +232,13 @@ }; base.init(); - } + }; $.fn.textillate = function (settings, args) { return this.each(function () { - var $this = $(this) - , data = $this.data('textillate') - , options = $.extend(true, {}, $.fn.textillate.defaults, getData(this), typeof settings == 'object' && settings); + var $this = $(this), + data = $this.data('textillate'), + options = $.extend(true, {}, $.fn.textillate.defaults, getData(this), typeof settings == 'object' && settings); if (!data) { $this.data('textillate', (data = new Textillate(this, options))); @@ -251,7 +247,15 @@ } else { data.setOptions.call(data, options); } - }) + + /* + Slidermaker update to pass outEffects to tokens + hide each token when effect complete + */ + + $.fn.textillate.defaults.inEffects = $this.data('textillate').options.inEffects; + $.fn.textillate.defaults.outEffects = $this.data('textillate').options.outEffects; + }); }; $.fn.textillate.defaults = { @@ -260,7 +264,7 @@ minDisplayTime: 2000, initialDelay: 0, in: { - effect: 'fadeInLeftBig', + effect: '', delayScale: 1.5, delay: 50, sync: false, @@ -269,7 +273,7 @@ callback: function () {} }, out: { - effect: 'hinge', + effect: '', delayScale: 1.5, delay: 50, sync: false, @@ -279,7 +283,7 @@ }, autoStart: true, inEffects: [], - outEffects: [ 'hinge' ], + outEffects: [], callback: function () {}, type: 'char' };