From 137af77449c3221b13a9e2819a8d6b781b8beb1b Mon Sep 17 00:00:00 2001 From: Dan Eden Date: Thu, 13 Oct 2011 12:18:26 +0200 Subject: [PATCH] New! Exciting! 'tada' animation! --- animate.css | 189 +++++++++++++++++++++++----------------------------- 1 file changed, 85 insertions(+), 104 deletions(-) diff --git a/animate.css b/animate.css index cc78cf4..8cecf78 100644 --- a/animate.css +++ b/animate.css @@ -1,21 +1,11 @@ @-webkit-keyframes fadeIn { - 0% { - opacity: 0; - } - - 100% { - opacity: 1; - } + 0% {opacity: 0;} + 100% {opacity: 1;} } @-webkit-keyframes fadeOut { - 0% { - opacity: 1; - } - - 100% { - opacity: 0; - } + 0% {opacity: 1;} + 100% {opacity: 0;} } @-webkit-keyframes fadeInUp { @@ -395,101 +385,35 @@ } @-webkit-keyframes flash { - 0% { - opacity: 1; - } - - 25% { - opacity: 0; - } - - 50% { - opacity: 1; - } - - 75% { - opacity: 0; - } - - 100% { - opacity: 1; - } + 0% {opacity: 1;} + 25% {opacity: 0;} + 50% {opacity: 1;} + 75% {opacity: 0;} + 100% {opacity: 1;} } @-webkit-keyframes bounce { - 0% { - -webkit-transform: translateY(0); - } - - 20% { - -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); - } + 0% {-webkit-transform: translateY(0);} + 20% {-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 { - 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% {-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);} } @-webkit-keyframes rotateInDownLeft { @@ -632,6 +556,20 @@ } } +@-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);} + 100% {-webkit-transform: scale(1) rotate(0);} +} + @-moz-keyframes fadeIn { 0% { opacity: 0; @@ -1266,6 +1204,20 @@ } } +@-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);} + 100% {-moz-transform: scale(1) rotate(0);} +} + @-ms-keyframes fadeIn { 0% { opacity: 0; @@ -1900,6 +1852,20 @@ } } +@-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);} + 100% {-ms-transform: scale(1) rotate(0);} +} + @keyframes fadeIn { 0% { opacity: 0; @@ -2534,6 +2500,20 @@ } } +@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);} + 100% {transform: scale(1) rotate(0);} +} + .flash { -webkit-animation-name: flash; -moz-animation-name: flash; -ms-animation-name: flash; animation-name: flash; } .fadeIn { -webkit-animation-name: fadeIn; -moz-animation-name: fadeIn; -ms-animation-name: fadeIn; animation-name: fadeIn; } .fadeInUp { -webkit-animation-name: fadeInUp; -moz-animation-name: fadeInUp; -ms-animation-name: fadeInUp; animation-name: fadeInUp; } @@ -2574,4 +2554,5 @@ .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; -moz-animation-name: rotateOutUpLeft; -ms-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; } .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; -moz-animation-name: rotateOutUpRight; -ms-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; } .rotateIn { -webkit-animation-name: rotateIn; -moz-animation-name: rotateIn; -ms-animation-name: rotateIn; animation-name: rotateIn; } -.rotateOut { -webkit-animation-name: rotateOut; -moz-animation-name: rotateOut; -ms-animation-name: rotateOut; animation-name: rotateOut; } \ No newline at end of file +.rotateOut { -webkit-animation-name: rotateOut; -moz-animation-name: rotateOut; -ms-animation-name: rotateOut; animation-name: rotateOut; } +.tada { -webkit-animation-name: tada; -moz-animation-name: tada; -ms-animation-name: tada; animation-name: tada; } \ No newline at end of file