From 96b8c915fdc0eea069ea7d6e296482500ad9a899 Mon Sep 17 00:00:00 2001 From: Daniel Eden Date: Thu, 15 Aug 2013 22:37:36 +0100 Subject: [PATCH] Remove "wiggle" Sorry to say, "wiggle" never really passed quality control for me. --- animate.css | 637 +++++++++++++++++++++++----------------------------- 1 file changed, 280 insertions(+), 357 deletions(-) diff --git a/animate.css b/animate.css index ee6e97e..baa7ca2 100644 --- a/animate.css +++ b/animate.css @@ -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); - } + } } .animated.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); @@ -2973,34 +2973,34 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ 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; } + 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; } + 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; } + 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; } + 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; } } @@ -3184,80 +3184,3 @@ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ -o-animation-duration: 0.25s; animation-duration: 0.25s; } - -/* originally authored by Angelo Rohit - https://github.com/angelorohit */ - -@-webkit-keyframes wiggle { - 0% { -webkit-transform: skewX(9deg); } - 10% { -webkit-transform: skewX(-8deg); } - 20% { -webkit-transform: skewX(7deg); } - 30% { -webkit-transform: skewX(-6deg); } - 40% { -webkit-transform: skewX(5deg); } - 50% { -webkit-transform: skewX(-4deg); } - 60% { -webkit-transform: skewX(3deg); } - 70% { -webkit-transform: skewX(-2deg); } - 80% { -webkit-transform: skewX(1deg); } - 90% { -webkit-transform: skewX(0deg); } - 100% { -webkit-transform: skewX(0deg); } -} - -@-moz-keyframes wiggle { - 0% { -moz-transform: skewX(9deg); } - 10% { -moz-transform: skewX(-8deg); } - 20% { -moz-transform: skewX(7deg); } - 30% { -moz-transform: skewX(-6deg); } - 40% { -moz-transform: skewX(5deg); } - 50% { -moz-transform: skewX(-4deg); } - 60% { -moz-transform: skewX(3deg); } - 70% { -moz-transform: skewX(-2deg); } - 80% { -moz-transform: skewX(1deg); } - 90% { -moz-transform: skewX(0deg); } - 100% { -moz-transform: skewX(0deg); } -} - -@-o-keyframes wiggle { - 0% { -o-transform: skewX(9deg); } - 10% { -o-transform: skewX(-8deg); } - 20% { -o-transform: skewX(7deg); } - 30% { -o-transform: skewX(-6deg); } - 40% { -o-transform: skewX(5deg); } - 50% { -o-transform: skewX(-4deg); } - 60% { -o-transform: skewX(3deg); } - 70% { -o-transform: skewX(-2deg); } - 80% { -o-transform: skewX(1deg); } - 90% { -o-transform: skewX(0deg); } - 100% { -o-transform: skewX(0deg); } -} - -@keyframes wiggle { - 0% { transform: skewX(9deg); } - 10% { transform: skewX(-8deg); } - 20% { transform: skewX(7deg); } - 30% { transform: skewX(-6deg); } - 40% { transform: skewX(5deg); } - 50% { transform: skewX(-4deg); } - 60% { transform: skewX(3deg); } - 70% { transform: skewX(-2deg); } - 80% { transform: skewX(1deg); } - 90% { transform: skewX(0deg); } - 100% { transform: skewX(0deg); } -} - -.animated.wiggle { - -webkit-animation-name: wiggle; - -moz-animation-name: wiggle; - -o-animation-name: wiggle; - animation-name: wiggle; - - -webkit-animation-timing-function: ease-in; - -moz-animation-timing-function: ease-in; - -o-animation-timing-function: ease-in; - animation-timing-function: ease-in; -} - -.animated.wiggle { - -webkit-animation-duration: 0.75s; - -moz-animation-duration: 0.75s; - -o-animation-duration: 0.75s; - animation-duration: 0.75s; -}