From 53df09992e927ca2a67386a74babd0203ca70919 Mon Sep 17 00:00:00 2001 From: Anthony Calzadilla Date: Fri, 14 Oct 2011 11:20:24 -0400 Subject: [PATCH 1/3] Removed repetitive @keyframe declarations on .flash class Signed-off-by: Anthony Calzadilla --- animate.css | 71 ++++++------------------------------------------ source/flash.css | 28 ++++++------------- 2 files changed, 17 insertions(+), 82 deletions(-) diff --git a/animate.css b/animate.css index 8cecf78..5535142 100644 --- a/animate.css +++ b/animate.css @@ -385,13 +385,11 @@ } @-webkit-keyframes flash { - 0% {opacity: 1;} - 25% {opacity: 0;} - 50% {opacity: 1;} - 75% {opacity: 0;} - 100% {opacity: 1;} + 0%, 50%, 100% {opacity: 1;} + 25%, 75% {opacity: 0;} } + @-webkit-keyframes bounce { 0% {-webkit-transform: translateY(0);} 20% {-webkit-transform: translateY(0);} @@ -967,25 +965,8 @@ } @-moz-keyframes flash { - 0% { - opacity: 1; - } - - 25% { - opacity: 0; - } - - 50% { - opacity: 1; - } - - 75% { - opacity: 0; - } - - 100% { - opacity: 1; - } + 0%, 50%, 100% {opacity: 1;} + 25%, 75% {opacity: 0;} } @-moz-keyframes bounce { @@ -1615,25 +1596,8 @@ } @-ms-keyframes flash { - 0% { - opacity: 1; - } - - 25% { - opacity: 0; - } - - 50% { - opacity: 1; - } - - 75% { - opacity: 0; - } - - 100% { - opacity: 1; - } + 0%, 50%, 100% {opacity: 1;} + 25%, 75% {opacity: 0;} } @-ms-keyframes bounce { @@ -2263,25 +2227,8 @@ } @keyframes flash { - 0% { - opacity: 1; - } - - 25% { - opacity: 0; - } - - 50% { - opacity: 1; - } - - 75% { - opacity: 0; - } - - 100% { - opacity: 1; - } + 0%, 50%, 100% {opacity: 1;} + 25%, 75% {opacity: 0;} } @keyframes bounce { diff --git a/source/flash.css b/source/flash.css index 78de50b..c506b0b 100644 --- a/source/flash.css +++ b/source/flash.css @@ -1,33 +1,21 @@ @-webkit-keyframes flash { - 0% {opacity: 1;} - 25% {opacity: 0;} - 50% {opacity: 1;} - 75% {opacity: 0;} - 100% {opacity: 1;} + 0%, 50%, 100% {opacity: 1;} + 25%, 75% {opacity: 0;} } @-moz-keyframes flash { - 0% {opacity: 1;} - 25% {opacity: 0;} - 50% {opacity: 1;} - 75% {opacity: 0;} - 100% {opacity: 1;} + 0%, 50%, 100% {opacity: 1;} + 25%, 75% {opacity: 0;} } @-ms-keyframes flash { - 0% {opacity: 1;} - 25% {opacity: 0;} - 50% {opacity: 1;} - 75% {opacity: 0;} - 100% {opacity: 1;} + 0%, 50%, 100% {opacity: 1;} + 25%, 75% {opacity: 0;} } @keyframes flash { - 0% {opacity: 1;} - 25% {opacity: 0;} - 50% {opacity: 1;} - 75% {opacity: 0;} - 100% {opacity: 1;} + 0%, 50%, 100% {opacity: 1;} + 25%, 75% {opacity: 0;} } .flash { From 20ac14ab78811dbaf03db6ceca33262974feb587 Mon Sep 17 00:00:00 2001 From: Anthony Calzadilla Date: Fri, 14 Oct 2011 11:29:24 -0400 Subject: [PATCH 2/3] Removed repetitive @keyframe declarations from .bounce class Signed-off-by: Anthony Calzadilla --- animate.css | 96 +++++------------------------------------------ source/bounce.css | 24 ++---------- 2 files changed, 14 insertions(+), 106 deletions(-) diff --git a/animate.css b/animate.css index 5535142..550040c 100644 --- a/animate.css +++ b/animate.css @@ -391,13 +391,9 @@ @-webkit-keyframes bounce { - 0% {-webkit-transform: translateY(0);} - 20% {-webkit-transform: translateY(0);} + 0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} 40% {-webkit-transform: translateY(-30px);} - 50% {-webkit-transform: translateY(0);} 60% {-webkit-transform: translateY(-15px);} - 80% {-webkit-transform: translateY(0);} - 100% {-webkit-transform: translateY(0);} } @-webkit-keyframes shake { @@ -970,33 +966,9 @@ } @-moz-keyframes bounce { - 0% { - -moz-transform: translateY(0); - } - - 20% { - -moz-transform: translateY(0); - } - - 40% { - -moz-transform: translateY(-30px); - } - - 50% { - -moz-transform: translateY(0); - } - - 60% { - -moz-transform: translateY(-15px); - } - - 80% { - -moz-transform: translateY(0); - } - - 100% { - -moz-transform: translateY(0); - } + 0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);} + 40% {-moz-transform: translateY(-30px);} + 60% {-moz-transform: translateY(-15px);} } @-moz-keyframes shake { @@ -1601,33 +1573,9 @@ } @-ms-keyframes bounce { - 0% { - -ms-transform: translateY(0); - } - - 20% { - -ms-transform: translateY(0); - } - - 40% { - -ms-transform: translateY(-30px); - } - - 50% { - -ms-transform: translateY(0); - } - - 60% { - -ms-transform: translateY(-15px); - } - - 80% { - -ms-transform: translateY(0); - } - - 100% { - -ms-transform: translateY(0); - } + 0%, 20%, 50%, 80%, 100% {-ms-transform: translateY(0);} + 40% {-ms-transform: translateY(-30px);} + 60% {-ms-transform: translateY(-15px);} } @-ms-keyframes shake { @@ -2232,33 +2180,9 @@ } @keyframes bounce { - 0% { - transform: translateY(0); - } - - 20% { - transform: translateY(0); - } - - 40% { - transform: translateY(-30px); - } - - 50% { - transform: translateY(0); - } - - 60% { - transform: translateY(-15px); - } - - 80% { - transform: translateY(0); - } - - 100% { - transform: translateY(0); - } + 0%, 20%, 50%, 80%, 100% {transform: translateY(0);} + 40% {transform: translateY(-30px);} + 60% {transform: translateY(-15px);} } @keyframes shake { diff --git a/source/bounce.css b/source/bounce.css index a114e95..02a9822 100644 --- a/source/bounce.css +++ b/source/bounce.css @@ -1,41 +1,25 @@ @-webkit-keyframes bounce { - 0% {-webkit-transform: translateY(0);} - 20% {-webkit-transform: translateY(0);} + 0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} 40% {-webkit-transform: translateY(-30px);} - 50% {-webkit-transform: translateY(0);} 60% {-webkit-transform: translateY(-15px);} - 80% {-webkit-transform: translateY(0);} - 100% {-webkit-transform: translateY(0);} } @-moz-keyframes bounce { - 0% {-moz-transform: translateY(0);} - 20% {-moz-transform: translateY(0);} + 0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);} 40% {-moz-transform: translateY(-30px);} - 50% {-moz-transform: translateY(0);} 60% {-moz-transform: translateY(-15px);} - 80% {-moz-transform: translateY(0);} - 100% {-moz-transform: translateY(0);} } @-ms-keyframes bounce { - 0% {-ms-transform: translateY(0);} - 20% {-ms-transform: translateY(0);} + 0%, 20%, 50%, 80%, 100% {-ms-transform: translateY(0);} 40% {-ms-transform: translateY(-30px);} - 50% {-ms-transform: translateY(0);} 60% {-ms-transform: translateY(-15px);} - 80% {-ms-transform: translateY(0);} - 100% {-ms-transform: translateY(0);} } @keyframes bounce { - 0% {transform: translateY(0);} - 20% {transform: translateY(0);} + 0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 40% {transform: translateY(-30px);} - 50% {transform: translateY(0);} 60% {transform: translateY(-15px);} - 80% {transform: translateY(0);} - 100% {transform: translateY(0);} } .bounce { From 978c0bb9dbaf8d21a24fb0068957618d971a047a Mon Sep 17 00:00:00 2001 From: Anthony Calzadilla Date: Fri, 14 Oct 2011 11:54:30 -0400 Subject: [PATCH 3/3] removed repetitive @keyframe declarations on .shake, .tada classes Signed-off-by: Anthony Calzadilla --- animate.css | 201 ++++++----------------------------------------- source/shake.css | 59 ++++---------- source/tada.css | 48 +++-------- 3 files changed, 52 insertions(+), 256 deletions(-) diff --git a/animate.css b/animate.css index 550040c..78993f2 100644 --- a/animate.css +++ b/animate.css @@ -397,19 +397,12 @@ } @-webkit-keyframes shake { - 0% {-webkit-transform: translateX(0);} - 10% {-webkit-transform: translateX(-10px);} - 20% {-webkit-transform: translateX(10px);} - 30% {-webkit-transform: translateX(-10px);} - 40% {-webkit-transform: translateX(10px);} - 50% {-webkit-transform: translateX(-10px);} - 60% {-webkit-transform: translateX(10px);} - 70% {-webkit-transform: translateX(-10px);} - 80% {-webkit-transform: translateX(10px);} - 90% {-webkit-transform: translateX(-10px);} - 100% {-webkit-transform: translateX(0);} + 0%, 100% {-webkit-transform: translateX(0);} + 10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);} + 20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);} } + @-webkit-keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; @@ -552,15 +545,9 @@ @-webkit-keyframes tada { 0% {-webkit-transform: scale(1);} - 10% {-webkit-transform: scale(0.9) rotate(-3deg);} - 20% {-webkit-transform: scale(0.9) rotate(-3deg);} - 30% {-webkit-transform: scale(1.1) rotate(3deg);} - 40% {-webkit-transform: scale(1.1) rotate(-3deg);} - 50% {-webkit-transform: scale(1.1) rotate(3deg);} - 60% {-webkit-transform: scale(1.1) rotate(-3deg);} - 70% {-webkit-transform: scale(1.1) rotate(3deg);} - 80% {-webkit-transform: scale(1.1) rotate(-3deg);} - 90% {-webkit-transform: scale(1.1) rotate(3deg);} + 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);} 100% {-webkit-transform: scale(1) rotate(0);} } @@ -972,49 +959,9 @@ } @-moz-keyframes shake { - 0% { - -moz-transform: translateX(0); - } - - 10% { - -moz-transform: translateX(-10px); - } - - 20% { - -moz-transform: translateX(10px); - } - - 30% { - -moz-transform: translateX(-10px); - } - - 40% { - -moz-transform: translateX(10px); - } - - 50% { - -moz-transform: translateX(-10px); - } - - 60% { - -moz-transform: translateX(10px); - } - - 70% { - -moz-transform: translateX(-10px); - } - - 80% { - -moz-transform: translateX(10px); - } - - 90% { - -moz-transform: translateX(-10px); - } - - 100% { - -moz-transform: translateX(0); - } + 0%, 100% {-moz-transform: translateX(0);} + 10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(-10px);} + 20%, 40%, 60%, 80% {-moz-transform: translateX(10px);} } @-moz-keyframes rotateInDownLeft { @@ -1159,15 +1106,9 @@ @-moz-keyframes tada { 0% {-moz-transform: scale(1);} - 10% {-moz-transform: scale(0.9) rotate(-3deg);} - 20% {-moz-transform: scale(0.9) rotate(-3deg);} - 30% {-moz-transform: scale(1.1) rotate(3deg);} - 40% {-moz-transform: scale(1.1) rotate(-3deg);} - 50% {-moz-transform: scale(1.1) rotate(3deg);} - 60% {-moz-transform: scale(1.1) rotate(-3deg);} - 70% {-moz-transform: scale(1.1) rotate(3deg);} - 80% {-moz-transform: scale(1.1) rotate(-3deg);} - 90% {-moz-transform: scale(1.1) rotate(3deg);} + 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);} 100% {-moz-transform: scale(1) rotate(0);} } @@ -1579,49 +1520,9 @@ } @-ms-keyframes shake { - 0% { - -ms-transform: translateX(0); - } - - 10% { - -ms-transform: translateX(-10px); - } - - 20% { - -ms-transform: translateX(10px); - } - - 30% { - -ms-transform: translateX(-10px); - } - - 40% { - -ms-transform: translateX(10px); - } - - 50% { - -ms-transform: translateX(-10px); - } - - 60% { - -ms-transform: translateX(10px); - } - - 70% { - -ms-transform: translateX(-10px); - } - - 80% { - -ms-transform: translateX(10px); - } - - 90% { - -ms-transform: translateX(-10px); - } - - 100% { - -ms-transform: translateX(0); - } + 0%, 100% {-ms-transform: translateX(0);} + 10%, 30%, 50%, 70%, 90% {-ms-transform: translateX(-10px);} + 20%, 40%, 60%, 80% {-ms-transform: translateX(10px);} } @-ms-keyframes rotateInDownLeft { @@ -1766,15 +1667,9 @@ @-ms-keyframes tada { 0% {-ms-transform: scale(1);} - 10% {-ms-transform: scale(0.9) rotate(-3deg);} - 20% {-ms-transform: scale(0.9) rotate(-3deg);} - 30% {-ms-transform: scale(1.1) rotate(3deg);} - 40% {-ms-transform: scale(1.1) rotate(-3deg);} - 50% {-ms-transform: scale(1.1) rotate(3deg);} - 60% {-ms-transform: scale(1.1) rotate(-3deg);} - 70% {-ms-transform: scale(1.1) rotate(3deg);} - 80% {-ms-transform: scale(1.1) rotate(-3deg);} - 90% {-ms-transform: scale(1.1) rotate(3deg);} + 10%, 20% {-ms-transform: scale(0.9) rotate(-3deg);} + 30%, 50%, 70%, 90% {-ms-transform: scale(1.1) rotate(3deg);} + 40%, 60%, 80% {-ms-transform: scale(1.1) rotate(-3deg);} 100% {-ms-transform: scale(1) rotate(0);} } @@ -2186,49 +2081,9 @@ } @keyframes shake { - 0% { - transform: translateX(0); - } - - 10% { - transform: translateX(-10px); - } - - 20% { - transform: translateX(10px); - } - - 30% { - transform: translateX(-10px); - } - - 40% { - transform: translateX(10px); - } - - 50% { - transform: translateX(-10px); - } - - 60% { - transform: translateX(10px); - } - - 70% { - transform: translateX(-10px); - } - - 80% { - transform: translateX(10px); - } - - 90% { - transform: translateX(-10px); - } - - 100% { - transform: translateX(0); - } + 0%, 100% {transform: translateX(0);} + 10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);} + 20%, 40%, 60%, 80% {transform: translateX(10px);} } @keyframes rotateInDownLeft { @@ -2373,15 +2228,9 @@ @keyframes tada { 0% {transform: scale(1);} - 10% {transform: scale(0.9) rotate(-3deg);} - 20% {transform: scale(0.9) rotate(-3deg);} - 30% {transform: scale(1.1) rotate(3deg);} - 40% {transform: scale(1.1) rotate(-3deg);} - 50% {transform: scale(1.1) rotate(3deg);} - 60% {transform: scale(1.1) rotate(-3deg);} - 70% {transform: scale(1.1) rotate(3deg);} - 80% {transform: scale(1.1) rotate(-3deg);} - 90% {transform: scale(1.1) rotate(3deg);} + 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);} 100% {transform: scale(1) rotate(0);} } diff --git a/source/shake.css b/source/shake.css index f57f5b1..61cab1e 100644 --- a/source/shake.css +++ b/source/shake.css @@ -1,54 +1,25 @@ @-webkit-keyframes shake { - 0% {-webkit-transform: translateX(0);} - 10% {-webkit-transform: translateX(-10px);} - 20% {-webkit-transform: translateX(10px);} - 30% {-webkit-transform: translateX(-10px);} - 40% {-webkit-transform: translateX(10px);} - 50% {-webkit-transform: translateX(-10px);} - 60% {-webkit-transform: translateX(10px);} - 70% {-webkit-transform: translateX(-10px);} - 80% {-webkit-transform: translateX(10px);} - 90% {-webkit-transform: translateX(-10px);} - 100% {-webkit-transform: translateX(0);} + 0%, 100% {-webkit-transform: translateX(0);} + 10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);} + 20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);} } + @-moz-keyframes shake { - 0% {-moz-transform: translateX(0);} - 10% {-moz-transform: translateX(-10px);} - 20% {-moz-transform: translateX(10px);} - 30% {-moz-transform: translateX(-10px);} - 40% {-moz-transform: translateX(10px);} - 50% {-moz-transform: translateX(-10px);} - 60% {-moz-transform: translateX(10px);} - 70% {-moz-transform: translateX(-10px);} - 80% {-moz-transform: translateX(10px);} - 90% {-moz-transform: translateX(-10px);} - 100% {-moz-transform: translateX(0);} + 0%, 100% {-moz-transform: translateX(0);} + 10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(-10px);} + 20%, 40%, 60%, 80% {-moz-transform: translateX(10px);} } + @-ms-keyframes shake { - 0% {-ms-transform: translateX(0);} - 10% {-ms-transform: translateX(-10px);} - 20% {-ms-transform: translateX(10px);} - 30% {-ms-transform: translateX(-10px);} - 40% {-ms-transform: translateX(10px);} - 50% {-ms-transform: translateX(-10px);} - 60% {-ms-transform: translateX(10px);} - 70% {-ms-transform: translateX(-10px);} - 80% {-ms-transform: translateX(10px);} - 90% {-ms-transform: translateX(-10px);} - 100% {-ms-transform: translateX(0);} + 0%, 100% {-ms-transform: translateX(0);} + 10%, 30%, 50%, 70%, 90% {-ms-transform: translateX(-10px);} + 20%, 40%, 60%, 80% {-ms-transform: translateX(10px);} } + @keyframes shake { - 0% {transform: translateX(0);} - 10% {transform: translateX(-10px);} - 20% {transform: translateX(10px);} - 30% {transform: translateX(-10px);} - 40% {transform: translateX(10px);} - 50% {transform: translateX(-10px);} - 60% {transform: translateX(10px);} - 70% {transform: translateX(-10px);} - 80% {transform: translateX(10px);} - 90% {transform: translateX(-10px);} - 100% {transform: translateX(0);} + 0%, 100% {transform: translateX(0);} + 10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);} + 20%, 40%, 60%, 80% {transform: translateX(10px);} } .shake { diff --git a/source/tada.css b/source/tada.css index dc26269..f461fe2 100644 --- a/source/tada.css +++ b/source/tada.css @@ -1,56 +1,32 @@ @-webkit-keyframes tada { 0% {-webkit-transform: scale(1);} - 10% {-webkit-transform: scale(0.9) rotate(-3deg);} - 20% {-webkit-transform: scale(0.9) rotate(-3deg);} - 30% {-webkit-transform: scale(1.1) rotate(3deg);} - 40% {-webkit-transform: scale(1.1) rotate(-3deg);} - 50% {-webkit-transform: scale(1.1) rotate(3deg);} - 60% {-webkit-transform: scale(1.1) rotate(-3deg);} - 70% {-webkit-transform: scale(1.1) rotate(3deg);} - 80% {-webkit-transform: scale(1.1) rotate(-3deg);} - 90% {-webkit-transform: scale(1.1) rotate(3deg);} + 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);} 100% {-webkit-transform: scale(1) rotate(0);} } @-moz-keyframes tada { 0% {-moz-transform: scale(1);} - 10% {-moz-transform: scale(0.9) rotate(-3deg);} - 20% {-moz-transform: scale(0.9) rotate(-3deg);} - 30% {-moz-transform: scale(1.1) rotate(3deg);} - 40% {-moz-transform: scale(1.1) rotate(-3deg);} - 50% {-moz-transform: scale(1.1) rotate(3deg);} - 60% {-moz-transform: scale(1.1) rotate(-3deg);} - 70% {-moz-transform: scale(1.1) rotate(3deg);} - 80% {-moz-transform: scale(1.1) rotate(-3deg);} - 90% {-moz-transform: scale(1.1) rotate(3deg);} + 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);} 100% {-moz-transform: scale(1) rotate(0);} } @-ms-keyframes tada { 0% {-ms-transform: scale(1);} - 10% {-ms-transform: scale(0.9) rotate(-3deg);} - 20% {-ms-transform: scale(0.9) rotate(-3deg);} - 30% {-ms-transform: scale(1.1) rotate(3deg);} - 40% {-ms-transform: scale(1.1) rotate(-3deg);} - 50% {-ms-transform: scale(1.1) rotate(3deg);} - 60% {-ms-transform: scale(1.1) rotate(-3deg);} - 70% {-ms-transform: scale(1.1) rotate(3deg);} - 80% {-ms-transform: scale(1.1) rotate(-3deg);} - 90% {-ms-transform: scale(1.1) rotate(3deg);} + 10%, 20% {-ms-transform: scale(0.9) rotate(-3deg);} + 30%, 50%, 70%, 90% {-ms-transform: scale(1.1) rotate(3deg);} + 40%, 60%, 80% {-ms-transform: scale(1.1) rotate(-3deg);} 100% {-ms-transform: scale(1) rotate(0);} } @keyframes tada { 0% {transform: scale(1);} - 10% {transform: scale(0.9) rotate(-3deg);} - 20% {transform: scale(0.9) rotate(-3deg);} - 30% {transform: scale(1.1) rotate(3deg);} - 40% {transform: scale(1.1) rotate(-3deg);} - 50% {transform: scale(1.1) rotate(3deg);} - 60% {transform: scale(1.1) rotate(-3deg);} - 70% {transform: scale(1.1) rotate(3deg);} - 80% {transform: scale(1.1) rotate(-3deg);} - 90% {transform: scale(1.1) rotate(3deg);} + 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);} 100% {transform: scale(1) rotate(0);} }