From 2984b7c050547a67670cbd1affaeaedb1b856ceb Mon Sep 17 00:00:00 2001 From: angelorohit Date: Thu, 10 May 2012 23:14:08 +0800 Subject: [PATCH] ADDED: vibrate animation. Signed-off-by: angelorohit --- animate.css | 96 +++++++++++++++++++++++++++++++++++++++++++++- source/vibrate.css | 83 +++++++++++++++++++++++++++++++++++++++ 2 files changed, 178 insertions(+), 1 deletion(-) create mode 100644 source/vibrate.css diff --git a/animate.css b/animate.css index 01e60bd..065b80a 100644 --- a/animate.css +++ b/animate.css @@ -3918,4 +3918,98 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI -ms-animation-duration: 0.25s; -o-animation-duration: 0.25s; animation-duration: 0.25s; -} \ No newline at end of file +} + +/* originally authored by Angelo Rohit - https://github.com/angelorohit */ + +@-webkit-keyframes vibrate { + 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 vibrate { + 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); } +} + +@-ms-keyframes vibrate { + 0% { -ms-transform: skewX(9deg); } + 10% { -ms-transform: skewX(-8deg); } + 20% { -ms-transform: skewX(7deg); } + 30% { -ms-transform: skewX(-6deg); } + 40% { -ms-transform: skewX(5deg); } + 50% { -ms-transform: skewX(-4deg); } + 60% { -ms-transform: skewX(3deg); } + 70% { -ms-transform: skewX(-2deg); } + 80% { -ms-transform: skewX(1deg); } + 90% { -ms-transform: skewX(0deg); } + 100% { -ms-transform: skewX(0deg); } +} + +@-o-keyframes vibrate { + 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 vibrate { + 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); } +} + +.vibrate { + -webkit-animation-name: vibrate; + -moz-animation-name: vibrate; + -ms-animation-name: vibrate; + -o-animation-name: vibrate; + animation-name: vibrate; + + -webkit-animation-timing-function: ease-in; + -moz-animation-timing-function: ease-in; + -ms-animation-timing-function: ease-in; + -o-animation-timing-function: ease-in; + animation-timing-function: ease-in; +} + +.animated.vibrate { + -webkit-animation-duration: 0.5s; + -moz-animation-duration: 0.5s; + -ms-animation-duration: 0.5s; + -o-animation-duration: 0.5s; + animation-duration: 0.5s; +} diff --git a/source/vibrate.css b/source/vibrate.css new file mode 100644 index 0000000..dc2ec4b --- /dev/null +++ b/source/vibrate.css @@ -0,0 +1,83 @@ +@-webkit-keyframes vibrate { + 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 vibrate { + 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); } +} + +@-ms-keyframes vibrate { + 0% { -ms-transform: skewX(9deg); } + 10% { -ms-transform: skewX(-8deg); } + 20% { -ms-transform: skewX(7deg); } + 30% { -ms-transform: skewX(-6deg); } + 40% { -ms-transform: skewX(5deg); } + 50% { -ms-transform: skewX(-4deg); } + 60% { -ms-transform: skewX(3deg); } + 70% { -ms-transform: skewX(-2deg); } + 80% { -ms-transform: skewX(1deg); } + 90% { -ms-transform: skewX(0deg); } + 100% { -ms-transform: skewX(0deg); } +} + +@-o-keyframes vibrate { + 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 vibrate { + 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); } +} + +.vibrate { + -webkit-animation-name: vibrate; + -moz-animation-name: vibrate; + -ms-animation-name: vibrate; + -o-animation-name: vibrate; + animation-name: vibrate; + + -webkit-animation-timing-function: ease-in; + -moz-animation-timing-function: ease-in; + -ms-animation-timing-function: ease-in; + -o-animation-timing-function: ease-in; + animation-timing-function: ease-in; +} \ No newline at end of file